1

これは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>
4

1 に答える 1

5

あなたの問題を解決するために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;
}

がんばれ、乾杯

于 2013-08-06T15:48:01.160 に答える