替换无序列表中的列表项

debugcn 发表于 Dev

用户名

我是Jquery中的Lerner。

<ul id="draglist">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
</ul>
<ul id="droplist"> </ul>

我有以上两个清单。

  $(function() {

             $( "#draglist" ).sortable({appendTo: "body", helper:  "clone"});
             $( "#draglist" ).disableSelection();
             $( "#droplist" ).droppable(
                        {  activeClass: "ui-state-default",
                              hoverClass: "ui-state-hover",
                              accept: ":not(.ui-sortable-helper)",
                              drop: function( event, ui ) {

                                  var aa=ui.draggable.text();
                                  alert(aa);
                                  $( this ).find( ".placeholder" ).remove();
                                  $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );

                        }
             });
  });

此代码段使我的拖动列表可拖动和拖放列表可拖放。当我放下一个项目时，它将把一个项目追加到列表中。但是当我将一个元素放入第二个列表时，我想替换现有元素。怎么做？

提前致谢

马克西姆·斯捷潘年科

将其添加到放置函数中$("#droplist").children().remove();
，结果应如下所示：

$(function () {

    $("#draglist").sortable({
        appendTo: "body",
        helper: "clone"
    });
    $("#draglist").disableSelection();
    $("#droplist").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function (event, ui) {
            $("#droplist").children().remove();
            var aa = ui.draggable.text();
            alert(aa);
            $(this).find(".placeholder").remove();
            $("<li></li>").text(ui.draggable.text()).appendTo(this);



        }

    });


});