CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-sortable
mmurch
mmurch

Reputation: 463

jquery ui sortable - containment or cancel for only some items in sortable, only some destinations

Here is the crux of it: I need to disable/contain dragging and dropping between two sortables only for particular items, while allowing those same items to be dragged and dropped within their sortable. I don't see how I can do this with cancel or containment because they either apply to all sorting or all items. Is it possible to only cancel sorting between sortables? or is it possible to only contain certain items?

Here is the background situation: I have two sortables that connect fine using the connectWith option. They represent two columns of a newsletter, and you can add items to each column and drag and drop them between them. However, these items have types and there is a limit to the number of items of each type that you can have in each column. So the problem is that I want to disable dragging items from one column to the other column if the other column has already maxed out on that type of item. I have no problem identifying when an item type is maxed out in a column or identifying which items should or shouldn't be dragged. It's just a matter of triggering the right functionality in jquery ui.

Upvotes: 0

Views: 2570

Answers (1)

Luca Filosofi
Luca Filosofi

Reputation: 31173

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable",
      receive: function(event, ui) { 
        if ( $(this).find('li').size() == 7 ) {
         $(ui.sender).sortable('cancel');
        }
      }
    });
  });

if #sortable reach 7 items it stop accepting other items

Upvotes: 3

Related Questions