jQuery-UI 可排序/可放置

Question

我正在创建一个界面，以便用户可以拖放元素，然后也可以对它们进行排序。拖放/排序功能工作顺利，但是，当我试图对“dropzone”中的拖放元素进行排序时，而不是我试图拖动的元素，它是正在移动的元素源。花了一些时间，但我发现这是因为.clone(true) 或.clone(false) 可能会发生这种事情。所以我决定删除它，但现在排序 div 中的元素似乎.. 坏了。

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

<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 class="card col-6 offset-1">
        <div class="card-body dropzone">

        </div>
    </div>
</div>

这就是 JS：

$(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
    });
});

所以.clone() 中的参数，不管它们是什么，大多数时候，当我拖动一个克隆的元素时，原来的元素会移动，但有时它会起作用，我不知道为什么。没有参数，好的元素被拖动，但没有堆叠和排序的概念，元素停留在我放下它的地方，其他元素会根据它的位置调整它们的位置。

有没有办法解决这种问题？

提前谢谢你

Answer 1

您不需要droppable 和sortable 方法就足够了，因为它是draggable 和sortable。所以你可以这样做：

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

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

Online demo (jsFiddle)

Answer 2

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

Live demo

<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,      
  });
});