Question

这是我的jquery sortable代码。我想在拖动其中的元素后从sortable2和sortable3中删除重复项。我尝试了很多方法，但我失败了。请给我一个完整的工作代码，以便我可以在我的脚本上实现它。

     <html lang="en">
     <head>
     <meta charset="utf-8" />
     <title>jQuery UI Sortable - Connect lists</title>
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
     <link rel="stylesheet" href="/resources/demos/style.css" />
     <style>
     #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; width: 200px; height: 200px; border: solid 1px black; }
     #sortable1 li, #sortable2 li, #sortable3 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    </style>
    <script>
    $(function () {


      $("#sortable2").sortable({});

      $("#sortable3").sortable({});
       $("#sortable1").sortable({ });
      $( "#sortable1 li" ).draggable({
            connectToSortable: "#sortable2,#sortable3",
            helper: "clone",
            revert: "invalid"
        });


  });
 </script>
 </head>
 <body>

 <ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default" id="k1">Item 1</li>
  <li class="ui-state-default"id="k2">Item 2</li>
  <li class="ui-state-default"id="k3">Item 3</li>
  <li class="ui-state-default"id="k4">Item 4</li>
  <li class="ui-state-default"id="k5">Item 5</li>
 </ul>

 <ul id="sortable2" class="connectedSortable">

 </ul>

 <ul id="sortable3" class="connectedSortable">

 </ul>



 </body>
 </html>

Answer 1

我在jsFiddle中做了一个例子来解决你的问题，或者我认为你的问题是什么。

测试它，并告诉我这是否是你需要的。

http://jsfiddle.net/jKzWp/16/

我创建了一个函数来测试新项是否已经在列表中，如果是，则从列表中删除该项。

这是js代码：

$(function () {
  $("#sortable2").sortable({
      receive: function (event, ui) {
          var pasteItem = checkList("sortable2", $(this).data().uiSortable.currentItem);
          if (!pasteItem){
               $(this).data().uiSortable.currentItem.remove();
          }
      }
  });

  $("#sortable3").sortable({
      receive: function (event, ui) {
          var pasteItem = checkList("sortable3", $(this).data().uiSortable.currentItem);
          if (!pasteItem){
               $(this).data().uiSortable.currentItem.remove();
          }
      }
  });
   $("#sortable1").sortable({ });
  $( "#sortable1 li" ).draggable({
        connectToSortable: "#sortable2,#sortable3",
        helper: "clone",
        revert: "invalid"
    });


  });



function checkList(listName, newItem){
          var dupl = false;
          $("#" + listName + " > li").each(function(){
        if ($(this)[0] !== newItem[0]){
            if ($(this).html() == newItem.html()){
                dupl = true;
            }
        }
    });

    return !dupl;
}

祝你好运，干杯

如何从jquery可排序连接列表中删除重复项？

1 个答案: