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あまりにも私のコードと何が起こるかを参照してください。 'clone'`と `ヘルパー：：' copy'`

は私が

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>