Javascript jQuery UI可排序/可拖放

我正在创建一个界面，这样用户可以拖放元素，但也可以在之后对它们进行排序。拖放/排序功能工作顺利，但是，当我尝试在“dropzone”中对拖放的元素进行排序时，移动的不是我尝试拖动的元素，而是元素源。这花了一些时间，但我发现这是因为

.clone（true）

或

.clone（false）

才可能发生这种事情。所以我决定删除它，但现在排序div中的元素似乎。。坏了

以下是HTML（引导程序4上下文）：

因此，对于

.clone（）

中的参数，无论它们是什么，在大多数情况下，当我拖动克隆元素时，原始元素会移动，但有时它会工作，我不知道为什么。如果没有参数，好的元素会被拖动，但是没有堆叠和排序的概念，元素会停留在我放下它的地方，其他元素会根据它的位置调整它们的位置

有没有办法解决这类问题

提前感谢您

如果您想移动元素“可拖动元素”，您必须将卡体设置为可拖动的“区域”（更高的标签）。但是这个标记在html代码中有两次。 检查我的实例

这是卡体中的一些文本。1.
这是卡体中的一些文本。2.
这是卡体中的一些文本。3.
...
$（文档）.ready（函数（）{
$（'.card body'）。可拖动({
还原：“无效”，
connectToSortable:“.dropzone”，
卷轴：错，
助手：“克隆”
});
$（'.dropzone'）。可排序({
距离：0，
});
});

您不需要

可拖放

和

可排序

方法就足够了，因为它是

可拖动的

和

可排序的

。所以你可以这样做：

$('.dropzone').sortable();

$('.draggable-element').draggable({
  connectToSortable: '.dropzone',
  revert: 'invalid',
  helper: 'clone'
});

---

谢谢你的回答，但是我有两个问题，尽管我认为

connectToSortable

可能是我一直在寻找的东西：我不能再在dropzone上放置任何元素，即使我移除了

。卡体

，指定可拖动区域应更高，使整个div（3个div在内部移动）或文本从js的60行移动到9行。。。好了，谢谢你，它现在就像一个符咒：'）

$(document).ready(function() {
    $('.draggable-element').draggable({
        revert: 'invalid'
        , appendTo: '.dropzone'
        , helper: 'clone'
    });

    $('.dropzone').droppable({
        drop: function(event, ui) {
            var item = $(ui.draggable);
            if (!item.hasClass('copy')) {
                var newy = item.clone(true, true);
                newy.addClass('copy');
                //console.log(newy);
                newy.draggable({
                    revert: 'invalid'
                    , stack: ".draggable"
                });
            } else {
                $(this).append(item);
            }
            $('.dropzone').append(newy);
        }
    }).sortable({
        axis: 'y'
        , revert: true
        , refreshPositions: true
        , placeholder: 'placeholder'
        , items: '.copy'
        , forcePlaceholderSize: true
    });
});

<div class="row">
    <div class="card col-3">
        <div class="card-body">
            <div class="card draggable-element" data-target="textarea">
                <div class="card-body">
                    This is some text within a card body. 1
                </div>
            </div>
            <div class="card draggable-element" data-target="textfield">
                <div class="card-body">
                    This is some text within a card body. 2
                </div>
            </div>
            <div class="card draggable-element" data-target="fileinput">
                <div class="card-body">
                    This is some text within a card body. 3
                </div>
            </div>
        </div>
    </div>
  </div>

  <div class="card col-6 offset-1">
    <div class="card-bodyX dropzone">
      ...
    </div>
  </div>

$(document).ready(function() {
  $('.card-body').draggable({
    revert: 'invalid',
    connectToSortable: '.dropzone',
    scroll: false,
    helper: 'clone'
  });

  $('.dropzone').sortable({
    distance: 0,      
  });
});

$('.dropzone').sortable();

$('.draggable-element').draggable({
  connectToSortable: '.dropzone',
  revert: 'invalid',
  helper: 'clone'
});