用於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/

我意識到通過在可排序/可拖動中覆蓋一些可能未記錄的事件，可能有一種更干凈的方式來完成最后一次修復，但這對我有用！