CODEWITHSUNDEEP
jqueryimagelinked-listdraggablejquery-ui-sortable
user1261710
user1261710

Reputation: 2639

JQuery How to limit the number of items in sortable linked lists - connect lists

I want to limit the number of images I can drag into each list. Each time the user will drag a clone into one of the connected lists. I need to limit the number of items they can drop into the sortable lists.

Do I need a custom Stop function? I tried that but it only limited the specific image rather than all of the images. What else can I do?

How can I do this?

Here is my code:

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

Upvotes: 0

Views: 1769

Answers (2)

Vivek
Vivek

Reputation: 178

very similar to this thread

jQuery Sortable - Limit number of items in list

best way would be to do some thing like this

$( "#slots" ).on( "sortreceive", function(event, ui) {
                                 if($("#slots li").length > 7){
                                         $(ui.sender).sortable('cancel');
                     }
        });

Upvotes: 2

Aaron Shoudy
Aaron Shoudy

Reputation: 33

this works for me

    $("#sortable1, #sortable2, #sortable3, #sortable4").on("sortreceive", function(event, ui) {
    var list = $(this);
    if (list.children().length > 1) {
   $(ui.sender).sortable('cancel');
   }
});

Upvotes: 0

Related Questions