Jquery Sortable and Dragable - ドラッグしたコンテンツをAjaxの結果に置き換えます。

Question

これはおそらく簡単な質問ですが、htmlでドラッグしているものをajax呼び出しからどのように置き換えることができますか？

ドラッグ可能なアイテムが「テキスト」アイテム（以下のHTMLスニペットのようなもの）であり、ヘルパーメソッドで「イメージ」を使用するものをドラッグした場合、どのようにドロップできますかどちらかを使用しますが、ajax呼び出しから返されるhtmlを挿入します。

ここで、正しいhtmlを得るためにajax呼び出しに 'input-type'値を使用してbtwを呼び出しますか？

デフォルトの「ドラッグされたアイテム」が挿入されないようにするにはどうすればよいですか？私。私は

は私がdroppableのように追加する必要はありますか私はreceivedイベント（作品の種類、することができます」のようにsortableでこれを行うのですか....内のdiv PUTやヘルパーメソッドイメージをしたくありませんイメージを削除しますが、ヘルプメソッドから削除します）??? （私は両方を試していましたが、Ajaxコールが働いていて、データなどを取得しましたが、デフォルトのものが削除されるのを防ぐ方法がわからないので、 '私は'コール...）

$("#desktoplayout").sortable({ 
    receive: function (event, ui) { 
     $(this).append('<div>html from ajax call</div>'); // kind of works... but the image from the 'helper method' on the 'draggable' is still there. 
    } 
}); // A sortable list of stuff into which things are dragged. 

var input-type; 

$("#draggableItems .item").draggable({ 
    connectToSortable: "#desktoplayout", 
    helper: function (event) { 
     return "<div class='item'><img src='/Images/Header.png' /></div>"; 
    }, 
    start: function (event, ui) { 
     input-type = $(this).find('.preview').data("input-type"); 
    }, 
    drag: function(e, t) { 
    }, 
    stop: function(e, t) { 
    } 
}); 

と

<div id="draggableItems"> 
    <div class="item"> 
     <div class="preview" data-input-type="1"> 
      TEXT 
     </div> 
    </div> 
</div> 

更新

これは私が望んでやっているようだ...やっての正しい方法helperにremoveを呼び出しているから、この？ここで

receive: function(event, ui) { 
    ui.helper.remove(); 
    var $this = $(this); 
    $.get("somewhere", function(data) { 
     // Note: presume more logic here..... 
     $($this).append(data); 
    }); 
} 

Answer 1

が一つの解決策の実施例である：jQueryの

https://jsfiddle.net/Twisty/zh9szubf/

HTML

<div id="draggableItems"> 
    <div class="item"> 
    <div class="preview" data-input-type="1"> 
     TEXT 
    </div> 
    </div> 
</div> 

<ul id="desktoplayout"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul> 

$(function() { 
    $("#desktoplayout").sortable({ 
    receive: function(event, ui) { 
     var newItem; 
     $.post("/echo/html/", { 
     html: "<li class='newItem'>From Ajax</li>" 
     }, function(data) { 
     ui.helper.replaceWith(data); 
     }); 
    } 
    }); 

    var inputType; 

    $("#draggableItems .item").draggable({ 
    connectToSortable: "#desktoplayout", 
    helper: function (event) { 
     return "<div class='item'><img src='/Images/Header.png' /></div>"; 
    }, 
    start: function(event, ui) { 
     inputType = ui.helper.find('.preview').data("input-type"); 
    } 
    }); 
}); 

$.get()でも動作しますが、例としては$.post()である必要があります。基本的に、あなたが望むものが何であれ、そのコードはui.helper.replaceWith()セクションにあるはずです。