jquery ui sortable 正在制作副本

Question

我对 javascript 尤其是 jQuery UI 比较陌生。我正在尝试制作一个（我认为很容易的）“拖放”区域，其中放置部分也需要可排序。拖放工作正常，但排序只工作大约 20%...问题是当我对一个元素进行排序时，它会留下一个副本和一个克隆，而不是仅仅移动它。

我认为这与我将可拖动部分中的助手设置为在可放置区域中进行克隆有关，并且当我尝试对元素进行排序时，克隆部分仍在工作。我希望我的描述很清楚......

见下面的代码。 2 是我要删除然后排序的元素。

<div id="draggable1">
     <H1>Headline</H1>
</div>
<div id="draggable2">
     <input type="text" value="move me..." class="form-control" />
</div>

<div id="droppable"></div>

$("#draggable1, #draggable2").draggable({
     helper: 'clone',
     cursor: 'move'
});

$("#droppable").sortable({
     connectWith: ".connectedSortable",
     cursor: 'move',
     helper: 'copy'
});

$("#droppable").droppable({
     drop: function (event, ui) {
         var droppable = $(this);
         var draggable = ui.draggable;
         draggable.clone().appendTo(droppable);
     }
});

我排序后，既有副本又有克隆。见图片。

Here link to fiddle with code 你们也看看我的代码和发生了什么。

我在那里得到相同的结果......

Answer 1

$(document).ready(function() {
  $("#draggable1").draggable();
  $("#draggable2").droppable({
    drop: function(event, ui) {
      $("h1").css("fontSize", "18px");
    },
    out: function(event, ui) {
      $("h1").css("fontSize", "30px");
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Also include jQueryUI -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="draggable1">
  <H1>Headline</H1>
</div>
<div id="draggable2">
  <input type="text" value="move me..." class="form-control" />
</div>

<div id="droppable"></div>