jquery - jqueryドラッグ可能な非リストアイテムをソート可能なリストに

原文 jquery draggable jquery-ui-sortable

これはささいなことのようですが、とにかくここにいます。以下のコードは、並べ替え可能なリストを持つドロップをドラッグするだけです。私がしたいことは、ドロップインされた要素にいくつかの作業を行うことです。この例では、ドロップされたアイテムはdivです。私がやりたいことは、divを内部に持つ新しいリスト項目を作成することです。

何か助けは?

<script>
$(function(){
    $(".sortable").sortable();
    $( ".draggable" ).draggable({
        connectToSortable: ".sortable",
        helper: "clone",
        revert: "invalid",
    }); 
}
</script>
<div class="draggable">DRAG ME</div>
<ul class="sortable">
    <li>ITEM 1</li>
    <li>ITEM 2</li>
    <li>ITEM 3</li>
    <li>ITEM 4</li>
</ul>


これも私が試したものです

<script>
$(function(){
    $(".sortable").sortable({
        receive: function(event, ui) { 
            ui.item = $("<li></li>").append(ui.item);
        }
    });

    $('.sortable').droppable({
        drop: function(event, ui){
            ui.draggable = $("<li></li>").append(ui.draggable);
        }
    });
}
</script>
答え
Sortableでstopイベントを使用する必要があります。

$(".sortable").sortable({
   stop: function(event, ui)
   {
      if (ui.item.is('div.draggable'))
         ui.item.replaceWith($('<li>' + ui.item.text() + '</li>'));
   }
});


学習のリファレンス:stopイベント

答えを見つけるのに役立つ同様の質問:Using jQuery UI drag-and-drop: changing the dragged element on drop
関連記事

jquery - 戻るボタンをダブルクリックすると、サイトが2ページ戻ります

jquery - ラベルで編集可能ですが、クリックに焦点を当てないようにするにはどうすればよいですか?

php - jquery添付ファイル付きの電子メールを送信

javascript - jQueryを使用して<head>からすべての<meta ..>を読み取るにはどうすればよいですか?

javascript - ページコンテンツがAjaxで読み込まれた後にJavaScriptを読み込む

javascript - jquery編集可能テーブル:特定のセルを編集可能にするにはどうすればよいですか?

javascript - jqueryを使用して、入力テキストボックスに基づいて使用可能なオプションを変更および表示[削除/追加]

javascript - jqueryを使用して更新を表示する

jquery - JQueryをサイズ変更可能およびドラッグ可能にするには、Greasemonkeyを使用する方法を教えてください。

javascript - アニメーションをバックグラウンドで別の要素の背後に保持するにはどうすればよいですか?