用于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选项集中使用sortables和draggables。

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

为了克服这个问题，我把每个孩子用div分开。 它使div成为可排序项，并防止触发自身上的事件。

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

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

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