首页 文章

单击时从jquery可排序列表中删除一个元素

提问于
浏览 次
2

我在jQuery中有两个可排序的列表 . 它们被称为sortable1和sortable2 . 他们在<ul> s <li> s . 当用户将一个元素从sortable2拖动到sortable1时，该元素将在sortable2中克隆 . 一旦放入sortable1，用户就无法将其移回sortable2，因为已经有另一个可以将它移到sortable2中 .

我的问题基本上是双重的：

  • 如何防止sortable1中丢弃的项目被拖回到sortable2中，同时仍具有重新排列的能力 .

  • 如何实现点击功能，以便删除您单击的可排序元素 . 此行为应仅在sortable1中发生 .

这是脚本：

<script>
$(function() {
    $( "#sortable1" ).sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
            $( "#sortable2" ).sortable({
        connectWith: ".connectedSortable",
                    helper: function(e,li) {
                                    copyHelper= li.clone().insertAfter(li);
                                    return li.clone();
                                }
    }).disableSelection();
});    
</script>

以下是列表背后的html片段：

<div id="symbolbay">
     <p>Drop symbols here</p>
     <ul id="sortable1" class="connectedSortable"></ul>
</div>
<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">Click me to delete only me</li>
    <li class="ui-state-highlight">Click me to delete only me</li>
...There are a whole bunch more, finally ending in...
</ul>

谢谢你的帮助！我是这项神奇技术的新手，我不断惊讶于它能做些什么 .

javascript jquery html jquery-ui

2 回答

  • 1

    我使用以下代码（@ChrisHerbert代码在我的情况下不起作用）：

    $("#sortable").on("click", "li", function () {
    $(this).remove();
});
    回复于
  • 0

    你应该把它分成两个问题 . 关于＃2：

    $('#sortable1 .ui-state-highlight').click(function(){
  $(this).remove();
});
    回复于

相关问题