用于DOM操作的JQuery Draggable Droppable和Sortable

Question

我正在尝试使用JQuery UI设置somme类型的拖放wysiwyg编辑器.

我已经成功设置了元素,但它们有一种奇怪的行为.

由于不断的闪烁,几乎不可能对物品进行分类.

我设置我的draggables像这样:

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

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

有时当一个元素掉入另一个元素时,它变成了一个可拖动的元素,似乎粘在一起.虽然这似乎与重写可排序更新有关:

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

我想我需要在可排序的地方拾取一些事件,但我现在很丢失......

Answer 1

好吧！我找到了！

实际上我最大的错误是同时混合了 droppable 和 sortable。我只需使用带有 connectToSortable 选项集的可排序和可拖动。

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

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

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

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

这是工作小提琴：http://jsfiddle.net/jmorvan/ag659/

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