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

答

如果你正试图从底部容器中的项目追加到顶柜，但在离开原有的完好什么你需要做的是，而不是：

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

做到这一点：

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

这里是工作示例： http://jsfiddle.net/bbhrsn9u/1/

感谢费德里科但在顶柜，在做排序操作列表中被克隆。尝试在排序时检查顶部容器，每次对物品进行排序时都会被重复。 – 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/

Jquery UI Drag，Drop and Sortable（保留被拖动的项目）

相关推荐