jQuery ui 替换拖动项的内容答案

【问题标题】：jQuery ui replace contents of dragged itemjQuery ui 替换拖动项的内容
【发布时间】：2019-12-06 18:42:27
【问题描述】：

我想替换掉项目的 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();

});

【问题讨论】：

你可以吗？ jsfiddle.net/7szcwv6p
@HardikLeuwa 谢谢，但正如您在您的示例中，当您拖动第二个项目时，它会删除所有以前拖动的项目，因此不起作用。

标签： javascript jquery jquery-ui jquery-ui-sortable jquery-ui-draggable

【解决方案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

【讨论】：