0

各リストにドラッグできる画像の数を制限したい。ユーザーが接続されたリストの 1 つにクローンをドラッグするたびに。並べ替え可能なリストにドロップできるアイテムの数を制限する必要があります。

カスタム停止機能が必要ですか? 私はそれを試しましたが、すべての画像ではなく特定の画像のみを制限しました。他に何ができますか？

これどうやってするの？

これが私のコードです：

<!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

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 に答える