Jquery UI Drag，Drop and Sortable（保留被拖動的項目）

有2個div容器頂部和底部包含ul標籤。Jquery UI Drag，Drop and Sortable（保留被拖動的項目）

我的要求是當記錄被拖到第一個容器時，即使在底部容器中也必須保留相同的記錄。頂部容器記錄應該是可排序的，但底部僅用於將記錄拖動到頂部容器並且底部容器不可排序。

頂集裝箱 - >可排序

底部容器 - >不可排序（不需要）

將 - >僅由底部恰巧頂部（當拖記錄應保留上頂部和底部）

的jsfiddle鏈接http://jsfiddle.net/bbhrsn9u/

<script type="text/javascript"> 

     $(document).ready(function() { 

     $("#sortable").sortable({ 
      revert: true, 
      helper : 'clone', 
      revert :10   
     }); 


     $("ol li").disableSelection(); 

     $(".sort_list li").draggable({ 

      tolerance:"pointer", 
      helper : 'clone', 
      refreshPositions: true , 
      revert : 'invalid', 
      opacity:.4, 
     }); 

     $(".drop_list ol").droppable({ 
      revert:true, 

      greedy: true, 
      refreshPositions: true, 
      drop : function(ev, ui) 
      { 
       $(ui.draggable).appendTo(this); 
       if($(this)[0].id === "sortable") 
       { 
        console.log($(this).closest("button").find('.hello')); 
        $(this).find('.hello').hide(); 
        $(this).find('.AH_section').show(); 

        ui.draggable.draggable('disable').closest('li').prependTo(ui.draggable.closest('ul')); //this will append dragged list at top of the container 
        return true; 
       } 
      } 
     }); 
    }); 
    </script>

HTML代碼

<div class="drop_list"> 
     <ol id="sortable" style="list-style:decimal;"> 
      <li id='item1' class="draggable_li qitem"> 
       <span class="item">Item = 1</span> 
      </li> 
      <li id='item2' class="draggable_li qitem"> 
       <span class="item">Item = 2</span> 
      </li> 
      <li id='item3' class="draggable_li qitem"> 
       <span class="item">Item = 3</span> 
      </li> 
      <li id='item4' class="draggable_li qitem"> 
       <span class="item">Item = 4</span> 
      </li>   
     </ol> 
    </div> 

    <div class="sort_list"> 
    <ul id="draggable"> 
     <li id='item1' class="draggable_li qitem"> 
      <span class="item">Item Dragged = 1</span> 
     </li> 
     <li id='item2' class="draggable_li qitem"> 
      <span class="item">Item Dragged = 2</span> 
     </li> 
     <li id='item3' class="draggable_li qitem"> 
      <span class="item">Item Dragged = 3</span> 
     </li> 
     <li id='item4' class="draggable_li qitem"> 
      <span class="item">Item Dragged = 4</span> 
     </li> 
     <li id='item5' class="draggable_li qitem"> 
      <span class="item">Item Dragged = 5</span> 
     </li>  
    </ul> 
    </div>

Snapshot

來源

2015-10-17 Sharath

如果你正試圖從底部容器中的項目追加到頂櫃，但在離開原有的完好什麼你需要做的是，而不是：

$(ui.draggable).appendTo(this);

做到這一點：

$(ui.draggable.clone()).appendTo(this);

這裏是工作示例： http://jsfiddle.net/bbhrsn9u/1/

來源

2015-10-17 13:50:43

感謝費德里科但在頂櫃，在做排序操作列表中被克隆。嘗試在排序時檢查頂部容器，每次對物品進行排序時都會被重複。 – Sharath

費德里科我已經在我的原始文章中包含快照 – Sharath

你可以使用connectToSortable選項。然後你的克隆將被保留並簡化你的代碼。就像這樣：

$(document).ready(function() { 

     $("#sortable").sortable({ 
      revert: true, 
      helper : 'clone', 
      revert :10   
     }); 


     $("ol li").disableSelection(); 

     $(".sort_list li").draggable({ 

      tolerance:"pointer", 
      helper : 'clone', 
      refreshPositions: true , 
      revert : 'invalid', 
      opacity:.4, 
      connectToSortable: '#sortable' 
     }); 


    });

http://jsfiddle.net/t0ndh136/1/

來源

2015-10-17 15:25:39

Jquery UI Drag，Drop and Sortable（保留被拖動的項目）

回答

相關問題