jQueryのUI

Question

を使用してドロップ可能な範囲内ソート可能なドラッグ可能要素を作る決議

は、だから私はより多くのビットを属性connectWithでsortable()を研究し、解決策は、私が予想よりも簡単だったが、私は一種の後方ので、それについて考えていましたdraggable()およびdroppable()である。ここで

はフィドルです：http://jsfiddle.net/DKBU9/12/

---

元の質問は次のとおりです。

は、これは私が別々に保持されなければならないと感じた以前のSOの質問の拡張です。

元の質問はjQuery UI - Clone droppable/sortable list after drop eventです。クローンされた要素に対する削除可能なハンドラの再初期化に関するものです。

しかし、私は最初のリストからドラッグされた要素をドロップ可能リスト内でソートできるようにしようとしています。 SOこれらの投稿を訴えると肥大化するのが好きのでhttp://jsfiddle.net/DKBU9/7/

し、必要なコード：ここで

は、基本的に元の質問の結果として、現在の動作を示すフィドルある

HTML

<ul id="draggables"> 

    <li>foo1</li> 
    <li>foo2</li> 
    <li>foo3</li> 

</ul> 

<ul class="droppable new"> 

</ul> 

JS

$(function() { 

    $('#draggables > li').draggable({ 
     appendTo: 'document', 
     revert: 'invalid' 
    }); 

    $('.droppable > li').draggable({ 
     appendTo: 'document', 
     revert: 'invalid' 
    }); 

    $('#draggables').droppable({ 
     accept: '.droppable > li', 
     drop: function(event, ui) { 
      ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this)); 
      cleanUp(); 
     } 
    }); 

    initDrop($('.droppable')); 

}); 

function initDrop($element) { 

    $element.droppable({ 
     accept: function(event, ui) { 
      return true; 
     }, 
     drop: function(event, ui) { 
      if($(this).hasClass('new')) { 
       var clone = $(this).clone();     
       $(this).after(clone); 
       $(this).removeClass('new'); 
       initDrop(clone); 
      } 
      ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this)); 
      cleanUp(); 
     } 
    }).sortable({ 
     items: 'li', 
     revert: false, 
     update: function() { 
      cleanUp(); 
     } 
    }); 

} 

function cleanUp() { 

    $('.droppable').not('.new').each(function() { 
     if($(this).find('li').length == 0) { 
      $(this).remove(); 
     } 
    }); 

} 

参考質問：Jquery UI combine sortable and draggable

私はこの結果を正確には私が達成しようとしているもの、具体的には受け入れられた答えのコメントで提供されているものとして、私の問題を解決するために、私は、マイナーな違いを考慮して、自分のコードにどのように適合させるかを理解できないようです。たとえば、その質問のフィドルは、実際の要素をドラッグするのではなく、ドラッグ可能な要素を複製し、鉱山とは異なり、要素を最初のリストに戻すことはできません。

私のコードのためにその結果を得ようとするどんな助けも大歓迎です。

また、この例では、accept属性がtrueを返す関数として設定されています。これの理由は何ですか？それは何かを受け入れるか、またはドラッグ可能な要素を受け入れることを意味していませんか？

EDIT：connectWith属性でsortable（）を使用したカップルの回答を読みましたが、何らかの理由で私が最初のリストを必要としなかったためソート可能です。しかし、sortable（）を単独で使用すると、私の後ろの機能が得られるように見えますが、まだすべてのイベントハンドラに適応していません。

Answer 1

this fiddleを参照してください。

これは、新しいリストでアイテムを削除してソートできるようにしますが、最初のアイテムでは編集できません。

いくつかのトリックがあります：私たちは、コンテナがドラッグ中程度ジャンプしないように（クローンを使用）プレースホルダを残す必要があるため

1）ドラッグ以降では、私は新しい機能を追加し、新しい要素をdraggableとして初期化する必要があります。

function initDraggable($element) 
{ 
    $($element).draggable({ 
     connectToSortable: '.droppable',  
     revert: function(droppableObj) 
     { 
      if(droppableObj === false) 
      {     
       $(this).removeClass('dragging'); 
       return true; 
      } 
      else 
      {    
       return false; 
      } 
     }, 
     helper: 'clone', 
     start: function(e, ui) 
     {   
      $draggingParent = $(this).parent(); 
      $(this).addClass('dragging'); 
     } 
    }); 
} 

注.droppableとconnectToSortable:（クリーンアップとして、私はあなたがソート可能なためにドロップ可能に変更すべきだと思います）。

また、revert: - 元の（複製された）要素を非表示にする「ドラッグ」クラスを元に戻す機会があります。

最後に、ドラッグ中に元の（複製された）要素を見えなくする「ドラッグ」クラスを追加するstartがあります。また、アイテムが#draggablesまたは.droppablesからドラッグされているかどうかをチェックするために使用される$ dr​​aggingParentを設定します。

2）はそこ#draggablesためdroppable()ある：この要素は#draggables又は.droppablesから削除されたか否かdropハンドラチェックが相応に作用すること

$("#draggables").droppable({  
    drop: function(ev, ui) { 
     if($draggingParent[0] === $(ui.helper).parent()[0]) 
     { 
      //dragged from draggables to draggables 
      $(ui.draggable).removeClass('dragging'); 
     } 
     else 
     {    
      if(ui.draggable.parent()) 
      var $clone = $(ui.draggable).clone(); 
      $(ui.draggable).remove(); 
      $clone.removeClass(); 
      $clone.removeAttr('style'); 
      initDraggable($clone); 
      $(this).append($clone);   
     } 
    } 

注意。すでに述べたように

3）最後に、私たちは本当にドロップ可能にソート可能になりたい：

function initDroppableSort($element) {  
    $element.sortable({ 
     items: 'li', 
     connectWith: ".droppable,#draggables", 
     revert: true, 
     stop: function(event, ui) { 
      $(ui.item).removeClass('dragging'); 
      $('.dragging').remove(); 
      if($(this).hasClass('new')) { 
       var clone = $(this).clone();     
       clone.empty(); 
       $(this).after(clone); 
       $(this).removeClass('new'); 
       initDroppableSort(clone); 
      }    
      cleanUp(); 
     } 
    }); 

} 

注connectWith、特にそれが.droppableと#draggablesの両方を指していること。