0

我想限制可以拖入每个列表的图像数量。每次用户将克隆拖到一个连接列表中。我需要限制它们可以放入可排序列表的项目数量。

我需要自定义停止功能吗？我试过了，但它只限制了特定的图像，而不是所有的图像。我还可以做些什么？

我怎样才能做到这一点？

这是我的代码：

<!doctype html>
<html lang="en">
 <head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

    <style>
        #sortable1, #sortable2, #sortable3, #sortable4 { 
            list-style-type: none; padding: 0; float: left; margin: 10px; padding: 5px; width: 95px; border: 1px dotted grey;
        }
        #sortable1 li, #sortable2 li, #sortable3 li , #sortable4 li { 
            margin: 5px; border: 1px solid grey; height:75px;
        }
        .top_area {
            margin: 10px; border: 1px solid black; width: 550px;
        }
        .drag { 
            margin: 10px;
        }
        .container {
            width:550px; margin: 10px; border: 1px solid black; height: 400px; background: lightgrey;
        }
    </style>

<script>
$(function() {
      $('.drag').draggable({
            connectToSortable: ".droptrue",
            helper: "clone",
            revert: "invalid"
       });
        $( "ul.droptrue" ).sortable({
            connectWith: "ul"
        });
     $( "#sortable1, #sortable2, #sortable3, #sortable4" ).disableSelection();
});
</script>
 </head>
 <body>
<div class="top_area">
    <img class="drag" id="1" src="small/Koala.jpg"/>
    <img class="drag" id="2" src="small/Desert.jpg"/>
    <img class="drag" id="3" src="small/Tulips.jpg"/>
</div>
<!-- 4 columns -->
<div class="container">
    <ul class="droptrue" id="sortable1" ></ul>
    <ul class="droptrue" id="sortable2" ></ul>
    <ul class="droptrue" id="sortable3" ></ul>
    <ul class="droptrue" id="sortable4" ></ul>
</div>
</body>
</html>
4

2 回答 2

2

非常类似于这个线程

jQuery Sortable - 限制列表中的项目数

最好的方法是做这样的事情

$( "#slots" ).on( "sortreceive", function(event, ui) {
                                 if($("#slots li").length > 7){
                                         $(ui.sender).sortable('cancel');
                     }
        });
于 2014-06-20T14:00:00.553 回答
0

这对我有用

    $("#sortable1, #sortable2, #sortable3, #sortable4").on("sortreceive", function(event, ui) {
    var list = $(this);
    if (list.children().length > 1) {
   $(ui.sender).sortable('cancel');
   }
});
于 2013-07-24T20:49:18.877 回答