JQuery ui 拖放和排序。排序时重复丢弃的项目答案

【问题标题】：JQuery ui Drag drop and sort. duplicating dropped item when sortingJQuery ui 拖放和排序。排序时重复丢弃的项目
【发布时间】：2017-02-23 13:48:23
【问题描述】：

我正在尝试使用 jquery-ui 实现拖放和排序。 drad 和 drop 有效，但我也希望能够插入两个先前丢弃的项目之间。但是我遇到的主要问题是当我尝试对其进行排序时，它再次克隆了丢弃的项目。我如何防止这种行为。

HTML

<div id="drop-area" class="ui-sortable">

  <!-- <p id="drop-placeholder-text">Drop Advert Here To Begin</p> -->
</div>
<br>


<div class='tile'>
  <div>
    <img class='grid-image ui-draggable' src='https://placehold.it/100x100' alt=''>
    <p>title</p>
  </div>
  <br>
  <a href='#'>Publish</a>
  <a href='#'>Playlist</a>
</div>

<div class='tile'>
  <div>
    <img class='grid-image ui-draggable' src='https://placehold.it/200x200' alt=''>
    <p>title</p>
  </div>
  <br>
  <a href='#'>Publish</a>
  <a href='#'>Playlist</a>
</div>

<div class='tile'>
  <div>
    <img class='grid-image ui-draggable' src='https://placehold.it/300x300' alt=''>
    <p>title</p>
  </div>
  <br>
  <a href='#'>Publish</a>
  <a href='#'>Playlist</a>
</div>
<div class='tile'>
  <div>
    <img class='grid-image ui-draggable' src='https://placehold.it/400x400' alt=''>
    <p>title</p>
  </div>
  <br>
  <a href='#'>Publish</a>
  <a href='#'>Playlist</a>
</div>

$(document).ready(function() {
  $("#drop-area").droppable({
    drop: function(event, ui) {

            var spacer = "<div class='spacer'></div>";
      var clone = $(ui.draggable).clone();
      clone.addClass('.connectedSortable')
      clone.removeClass('.ui-draggable');

      $(this).append(clone);
      $(this).append(spacer);

    }
  });
  $(".ui-draggable").draggable({
    opacity: 1.0,
    helper: 'clone',
    revert: 'invalid'
  });

  $("#drop-area").sortable({
    axis: "x"
  });
  $("#drop-area").disableSelection();

});

jsFiddle

【问题讨论】：

标签： javascript jquery sorting jquery-ui drag-and-drop

【解决方案1】：

我对您的代码进行了快速编辑，如下所示。基本上，当您删除块时，我添加了一个已删除的类，然后在添加新克隆之前检查该类是否存在。我在你的小提琴上检查了它，它似乎工作正常。

 if (clone.hasClass('dropped')) {
    return false;
  }
  clone.addClass('.connectedSortable').addClass('dropped');

【讨论】：

【解决方案2】：

我通过删除 $("#drop-area").droppable({}); 调用让它工作

$(document).ready(function() {

    $( ".ui-draggable" ).draggable({
        opacity: 1.0,
        helper: 'clone',
        revert: 'invalid',
        connectToSortable: '#drop-area'
    });

    $("#drop-area").sortable({
        axis:"x",
        connectWith: '.connectedSortable'
    });
    $("#drop-area").disableSelection();
});

【讨论】：