jQuery ui 替换拖动项的内容

Posted 2023-05-08

【中文标题】jQuery ui 替换拖动项的内容

【英文标题】：jQuery ui replace contents of dragged item

【发布时间】：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 谢谢，但正如您在您的示例中，当您拖动第二个项目时，它会删除所有以前拖动的项目，因此不起作用。

【参考方案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