jQuery的：SortableList和DroppableArea克隆問題之間的聯繫可拖動的項目

Question

我的工作由兩個部分面板上：

• 列表：包含我的所有小工具，我想每一個部件是可拖動和可排序。

• 一個區域：包含一個圖像，我想放下我的小部件（以後保存它們的位置）：所以我需要我的小部件可以拖放和拖動。

我正試圖用JQuery UI來做這件事。最重要的是，我希望能夠將我的小部件從列表拖到該區域，如果需要，可將它們拖回列表中。

---

編輯：https://jsfiddle.net/Tenmak/jzmsatrg/（新鏈接）

var myImageSlot = $("#image_slot").droppable({ 
    accept: ".listItem", 
    drop: function(ev, ui) { 
     console.log('dropped'); 

     if (ui.draggable.hasClass("ontray")) { 
     var cloneTile = ui.draggable.clone() 
      .removeClass("ontray") 
      .removeClass("ui-sortable-handle") 
      .show(); 
     myImageSlot.children(".itemsContainer").append(cloneTile); 
     var dropx = ui.offset.left - myImageSlot.offset().left; 
     var dropy = ui.offset.top - myImageSlot.offset().top; 

     cloneTile.css({ 
      "left": dropx + "px", 
      "position": "absolute", 
      "top": dropy + "px" 
     }); 
     setTileDraggable(cloneTile); 
     ui.helper.remove(); 
     ui.draggable.remove(); 
     } 
    } 
    }).disableSelection(); 

通過設置可拖動項目的絕對位置時，列表之外，想要的行爲是存在的，並且動畫是平滑的，但有時，由於clone（）方法無法正常工作，它最有可能被複制。

有什麼辦法來糾正這種錯誤行爲？我應該採取不同的方式嗎 任何幫助都會非常好，我覺得我到了那裏，但一些提示或任何事情會真的很有幫助。 N.B：我儘快開放賞金，因爲我真的需要這個。

Answer 1

我希望有固定的做下降後的克隆你有沒有和重複的問題。

我發現的原因是，它得到克隆兩次當您快速拖，因爲由於某種原因，是發展最快的移動會觸發它叫了兩聲drop事件下降容器之間的項目。

爲了解決這個問題，我使用data屬性爲負載上的每個可拖動項目設置索引，並在將項目附加到容器時檢查相同索引是否存在以避免重複。

然後我這個測試了很多，能不能沒有更多的複製問題。所以我希望它解決了這個問題，但反正我會需要你檢查和確認:-)

這裏是更新撥弄鏈接，

https://jsfiddle.net/balasuar/jzmsatrg/4/

的修復我所做的是，

的方法，設置索引

var setupItemIndex = function(index) { 
    return function(container) { 
     container.find(".listItem").each(function(){ 
        $(this).attr('data-index', index++); 
     }); 
    }; 
    }(0); 

然後發起對兩個容器的索引設置，

setupItemIndex($('#listContainer')); 
setupItemIndex($('#image_slot')); 

然後檢索放置項目的索引，

var targetContainer = myImageSlot.children(".itemsContainer"); 
    var itemIndex = ui.draggable.attr('data-index'); 

然後，檢查此索引是否追加它之前有在正確的容器已經存在。

if(targetContainer.has('[data-index="' + itemIndex + '"]').length === 0) { 
     myImageSlot.children(".itemsContainer").append(cloneTile); 

     ----- 

} 

給一個去:-)

Answer 2

我不得不從頭開始，並結束了與大量修改代碼。希望能幫助到你。

工作撥弄

https://jsfiddle.net/ergec/thj7sz0w/

HTML

<div class="master" id="master_containment"> 
    <div class="container sortables" id="listContainer"> 
     <div class="listItem">Item 1</div> 
     <div class="listItem">Item 2</div> 
     <div class="listItem">Item 3</div> 
    </div> 
    <div class="container" id="image_slot"> 
     <div class="itemsContainer sortables"> 
      <div class="listItem">Item 4</div> 
      <div class="listItem">Item 5</div> 
     </div> 
    </div> 
</div> 

CSS

.sortable-placeholder { 
    height: 60px; 
    width: 60px; 
    background-color: yellow; 
    float: left; 
} 

.listItem { 
    background: #00e; 
    color: #fff; 
    height: 60px; 
    line-height: 60px; 
    text-align: center; 
    width: 60px; 
    float: left; 
    position: relative; 
    z-index: 999; 
} 

.container { 
    background: teal; 
    border 1px; 
    border-style: solid; 
    width: 250px; 
    height: 200px; 
    padding: 10px; 
} 

#image_slot { 
    background: brown; 
    position: absolute; 
    left: 300px; 
    top: 8px; 
} 

.master { 
    width: 560px; 
    height: 220px; 
} 

.itemsContainer { 
    height: 200px; 
} 

個JS

$("#listContainer").sortable({ 
    placeholder: "sortable-placeholder", 
    containment: "#master_containment", 
    connectWith: ".itemsContainer", 
    revert: 100 
}).find(".listitem").draggable({ 
    connectToSortable: ".sortables", 
    containment: "#master_containment", 
    helper: "original", 
    revert: "invalid" 
}).disableSelection(); 
$(".itemsContainer").sortable({ 
    placeholder: "sortable-placeholder", 
    containment: "#master_containment", 
    connectWith: "#listContainer", 
    revert: 100 
}).find(".listItem").draggable({ 
    connectToSortable: ".sortables", 
    containment: "#master_containment", 
    helper: "original", 
    revert: "invalid" 
}).disableSelection();