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

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

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

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

Online demo (jsFiddle)

Answer 2

如果你想移动元素“draggable-element”，你必须设置为可拖动的“区域”卡片体（更高标签）。但是这个标签你的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,      
  });
});

jQuery-UI可排序/可放置

2 个答案: