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();