我正在尝试使用 JQuery UI 设置某种拖放所见即所得的编辑器。

我已经成功地设置了这些元素，但是它们有一个奇怪的行为。

由于不断闪烁，几乎不可能对项目进行排序。

我这样设置我的可拖动对象:

el.draggable({
    containement:'.main-form-container',
    revert: "invalid",
    connectToSortable: '.sortable'
}).disableSelection();

如果我不将其设置为可拖动，则 sortable 会将占位符放置在其自身上!为什么？

有时，当一个元素被放入另一个元素时，它会变成一个可拖动的元素并且看起来粘在一起。尽管这似乎已通过覆盖可排序更新修复:

update: function (event, ui) {
        $(ui.item).css({
            position: 'relative',
            top:0,
            left:0,
            width: 'auto'
        });

        // init droppable draggable and sortable on this item
        setupDandD($(ui.item));
    }

和 setupDandD 方法:

setupDandD($('.form-container'));

    function setupDandD(el) {
        el.draggable({
            containement:'.main-form-container',
            revert: "invalid",
            connectToSortable: '.sortable'
        }).disableSelection();

        el.droppable({
            accept: '[data-section="toolbox"]',
            greedy: true,
            hoverClass: 'droppable-hovered',
            drop: handleDrop
        }).disableSelection();

        el.filter('.sortable').sortable({
            tolerance:'pointer',
            containement:'.main-form-container',
            connectWith: ".sortable:not(#" + $(this).id + ")",
            revert: 'invalid',
            helper: function () {
                return $(this);
            },
            update: function (event, ui) {
                console.log('here');
                $(ui.item).css({
                    position: 'relative',
                    top:0,
                    left:0,
                    width: 'auto'
                });
                setupDandD($(ui.item));
            }
        }).disableSelection();
    };

我想我需要在 sortable 的某处获取一些事件，但我现在完全迷路了......

最佳答案

好吧好吧!我找到了!

实际上我最大的错误是同时混合了 droppable 和 sortable。我只需要将 sortables 和 draggables 与 connectToSortable 选项集一起使用。

我遇到的另一个奇怪行为是 sortable 试图插入自身。这是因为可排序的“connectWith”被设置为返回 self 的选择器，因此它在拖动时立即将占位符放在 self 上。实际上很符合逻辑!

为了克服这个问题，我只是用一个 div 包围了每个可排序的 child 。它使 div 成为可排序的项目，并防止自行触发事件。

使用 draggable+sortable 时要考虑的一件事是 sortable 将始终克隆对象，就像拖动开始时的那样。这意味着即使您在可拖动对象上使用自定义助手，它仍会插入原始项目。为此，如果它来 self 的工具箱，我必须将可排序的“停止”事件中的项目替换为我想要的项目:

$('.main-form-container').sortable({
    placeholder: "sortable-placeholder",
    opacity: .35,
    connectWith: ".sortable",
    stop: function (e, t) {

        if (t.item.attr('data-section') == "toolbox") {
            $(t.item).replaceWith(createContainer());
        }

        $(".sortable").sortable({
            opacity: .35,
            placeholder: "sortable-placeholder",
            connectWith: ".sortable"
        }).disableSelection();
    }
}).disableSelection();

这是工作 fiddle :http://jsfiddle.net/jmorvan/ag659/

我意识到可能有一种更简洁的方法可以通过覆盖可排序/可拖动中的一些可能未记录的事件来完成最后的修复，但这对我有用!

关于javascript - JQuery Draggable Droppable 和 Sortable 同时用于 DOM 操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20123587/