jQuery ui替换拖动项的内容

Question

我要替换放置的项目的html内容。 我能够附加新的html内容，但在这种情况下， sortable接收拖动的项目以及附加新项目。

receive: function (event, ui) {
    $(this).append('<li class="new">this is item 1</li>'); 

我实际上如何用新项目替换拖动的项目而不是追加？ 还是删除原始拖动的项目？

演示： http ： //jsfiddle.net/v97u5qtx/

HTML：

<ul id="answers">
  <li id="item-1">Item 1</li>
  <li id="item-2">Item 2</li>

</ul>

<ul class="container">
</ul>

jQuery的：

$(function() {

    $("#answers li").draggable({
      connectToSortable: '.container',
      helper: 'clone',
      revertDuration: 0,
    revert: true
    });

    $(".container").sortable({
        connectWith: '.container',
            revert: true,
        receive: function (event, ui) {
          var id = ui.item.attr("id");

             if ( id == 'item-1') {
            $(this).append('<li class="new">this is item 1</li>');    
          } else if ( id == 'item-2') {
            $(this).append('<li class="new">this is item 2</li>'); 
          }    
        }
    });

    $("ul, li").disableSelection();

});

Answer 1

请检查一下

更新了容器代码，如下所示：

$(".container").sortable({
    connectWith: '.container',
        revert: true,
    receive: function (event, ui) {
      var id = ui.item.attr("id");

      if ( id == 'item-1') {
        $(this).append('<li class="new">this is item 1</li>');    
      } else if ( id == 'item-2') {
        $(this).append('<li class="new">this is item 2</li>'); 
      }    

      $('.container .ui-draggable').remove();
    }
});

演示