Question

我是Jquery的Lerner。

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

我有2个以上的清单。

  $(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 );

                        }
             });
  });

此代码段使我的draglist draggeble和droplist droppable。当我删除一个项目时，它会将一个项目追加到列表中。但是当我将元素放入第二个列表时，我想要替换现有元素。怎么做？

提前致谢

Answer 1

将此添加到您的放置功能$("#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);



        }

    });


});

这是Fiddle

替换无序列表中的列表项

1 个答案: