jquery ui可排序製作副本

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>