2013-11-21 68 views
7

我想安裝somme種拖放使用JQuery UI的wysiwyg編輯器。JQuery Draggable Droppable和可以同時排序DOM操作

我已成功設置元素,但他們有一個奇怪的行爲。

由於持續的閃爍,對物品進行分類幾乎是不可能的。

設置我的拖拽元素是這樣的:

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

我想我需要一些皮卡事件某處的排序,但我相當現在失去...

回答

2

好!我找到了!

其實我最大的錯誤是混合droppable和排序在同一時間。我只需使用connectToSortable選項設置可排序和可拖動。

我有的另一個奇怪的行爲是試圖插入自己的排序。這是因爲可排序的「connectWith」被設置爲返回self的選擇器,因此它在拖動時立即將佔位符置於自身。其實很合邏輯!

爲了克服這個問題,我只包圍了每個可以用div來排序的孩子。它使div成爲可排序項目,並防止觸發自我事件。

使用可拖動+可排序時需要考慮的一件事是可排序將始終克隆對象,就像拖動開始時一樣。這意味着,即使您在可拖動的頁面上使用了自定義助手,它仍會插入原始項目。爲此,我曾在一個我想,如果它從我的工具箱來替換排序的「停止」事件的項目:

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

我知道通過重寫可排序/可拖動的某些可能未記錄的事件,可能會有更清晰的方法來完成最後的修復,但是這對我來說是個訣竅!