Jquery:SortableList和DropPaClearEA克隆问题之间链接的可拖动项

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（）方法无法正常工作而导致复制。

有没有办法纠正这种错误行为？我应该采取不同的做法吗？任何帮助都是非常好的，我觉得我已经做到了，但是一些提示或任何东西都会非常有用。注：我会尽快开始悬赏，因为我真的需要这个。

Answer 1

我不得不从头开始，最后得到了大量修改的代码。希望有帮助。

工作小提琴

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

Answer 2

我希望我已经修复了您在删除后进行克隆时重复的问题。

我发现的原因是，当您在容器之间快速拖放项目时，它会被克隆两次，因为拖放事件出于某种原因调用了两次，因为最快的移动会触发它。

为了解决这个问题，我在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);

        -----

}

试一试：-）