2015-10-17 151 views
2

我使用JQuery UI可拖放/拖放和排序操作。JQuery UI拖放和排序

我有兩個部分頂部/底部我正在從底部到頂部拖拽列表記錄了在頂部節以前我完成分揀

一切都做什麼工作的很好,但我發現一個問題,在我的排序操作在頂部當我排序列表記錄

讓我說我放置記錄3,並放入記錄1檢查元素我拖動記錄3是複製其記錄(創建它的一個副本)我想列表記錄不應該是複製/克隆時排序請有人幫我解決這個問題謝謝!

http://jsfiddle.net/BCnyU/204/

列出記錄複製快照拍攝

enter image description here

HTML

<div class="drop_list"> 
     <ol id="sortable" style="list-style:decimal;"> 
      <?php 
      for($i=1;$i<=2;$i++) 
      { 
      ?> 
       <li id='arrayorder_<?php echo $i;?>' class="draggable_li qitem"> 
        <div class="main_div"> 
         <div class="secondary_div"> 
          <label class="item_div"> 
           <span class="item">Item = <?php echo $i; ?></span> 
          </label> 
         </div> 
        </div> 
       </li> 
      <?php 
      } 
     ?> 
     </ol> 
    </div> 
    <div class="sort_list"> 
    <ul id="draggable"> 
     <?php 
      for($i=1;$i<=5;$i++) 
      { 
      ?> 
       <li id='arrayorder_<?php echo $i;?>' class="draggable_li qitem"> 
        <div class="main_div"> 
         <div class="secondary_div"> 
          <label class="item_div"> 
           <span class="item">Item = <?php echo $i; ?></span> 
          </label> 
         </div> 
        </div> 
       </li> 
      <?php 
      } 
     ?> 
    </ul> 
    </div> 

JQuery的

<script type="text/javascript"> 

     $(document).ready(function() { 

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

     $("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).clone().appendTo(this); 
       if($(this)[0].id === "sortable") 
       { 
        ui.draggable.draggable('disable').closest('li').prependTo(ui.draggable.closest('ul')); 
        return true; 
       } 
      } 
     }); 
    }); 
    </script> 

回答

2

這是因爲你正在做一個clone被丟棄的元素。 取而代之的是:

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

務必: $(ui.draggable).appendTo(this);

+0

非常感謝你對烏爾寶貴的時間和建議,謝謝! – Sjay