jQuery-UI 可排序/可丢弃

Question

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

这里是HTML（bootstrap 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

如果你想移动元素"draggable-element"，你必须设置为可拖动"zone" card-body (higher tag)。但是这个标签在你的 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,      
  });
});

Answer 2

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

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

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

Online demo (jsFiddle)

jQuery-UI 可排序/可丢弃

jQuery-UI sortable / droppable

javascript

jquery

jquery-ui

jquery-ui-sortable

jquery-ui-draggable