DOM操作のためにJQueryドラッグ可能なDroppableとSortableを同時に実行

Question

JQuery UIを使用してドラッグアンドドロップwysiwygエディタのソンムの種類を設定しようとしています。

私は要素を正常にセットアップしましたが、それらは奇妙な動作をしています。

一定のちらつきのためにアイテムを並べ替えることはほとんど不可能です。

私のセットアップ、このように私のdraggables：私はそれはのようにドラッグ可能なソート可能自体にプレースホルダが配置されます設定していけない場合

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

！どうして？

ある要素を別の要素にドロップすると、1つのドラッグ可能な要素になり、一緒に接着されているように見えます。

...私はソート可能な上のどこかピックアップにいくつかのイベントを必要とするが、私は非常に今、失われています推測

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

：

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方法：それは、ソート可能なアップデートをオーバーライドして、固定と思われるものの

Answer 1

よく！見つけた！

実際に私の最大の間違いは、同時にドロップ可能でソート可能なものを混在させることでした。私はちょうどconnectToSortableオプションセットでsortablesとdraggablesを使用しなければなりませんでした。

私が持っていた他の変わった動作は、それ自体の中に挿入しようとするソート可能な動作でした。これは、ソート可能な「connectWith」がセルフを返すセレクタに設定されているため、ドラッグされたときにプレースホルダを直ちに配置するためです。実際にはかなり論理的！

これを解決するには、divでソート可能な各子を囲んだだけです。 divをソート可能なアイテムにして、イベントを自分自身でトリガーするのを防ぎます。

ドラッグ可能な+ソート可能なオブジェクトを使用する際に考慮する必要があることの1つは、ソート可能なオブジェクトが常にドラッグを開始したときのようにオブジェクトをクローンすることです。これは、ドラッグ可能でカスタムヘルパーを使用しても、元のアイテムを挿入することを意味します。このために私はそれが私のツールボックスから来た場合、私が望んでいた1によってソートの「停止」イベントでアイテムを交換しなければならなかった：

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

私が実現しますソート可能な/ドラッグ可能な、多分文書化されていないイベントをオーバーライドすることで、この最後の修正を行うよりクリーンな方法があるかもしれませんが、それが私のトリックでした！