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>