jQuery ui 替换拖动项的内容

Question

我想替换掉落物品的 html 内容。我可以附加新的 html 内容，但在这种情况下 sortable 接收拖动的项目并附加新项目。

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

我怎样才能真正用新项目替换拖动的项目而不是追加？或者删除原来拖拽的item？

演示： 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();
    }
});

DEMO