CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
Sanju Uthaiah
Sanju Uthaiah

Reputation: 23

how to cancel drop event in jquery ui?

Here is my JSFiddle I want only one item to be dragged from each group(Fruits,Celebrity,Mobile Phones) to any one of the step. I tried by not allowing using return false, but return false doesn't seemed to work. Please help me not to drag and drop more than one element from each group to any of the rules.

I can add atmost add only 3 items to any of the group.

Here is my sample code which i wrote for not drop the element if the group is already present.

$("#Rule1List,#Rule2List,#Rule3List").on("drop",function  (element,ui) {

    $("#Rule1List>li,#Rule2List>li,#Rule3List>li").each(function  (index) {
      if($(this).eq(index).hasClass($(ui.draggable).attr('class')))
      {
        console.log($(ui));
        return false;
      }
    });

  });

Upvotes: 2

Views: 577

Answers (1)

M K Garwa
M K Garwa

Reputation: 495

Okay i am not gonna give you the code to solve this but a suggest might be beneficial for you

On drag of any item from any group just take size of items in that particular group i.e. length of item. for example in phone group you have 4 items. so on drag item store this size in a variable. on drop remove that particular item from item group. and check if current length of item group is less than previously stored size than remove draggable class and event from that particular itemgroup

Upvotes: 1

Related Questions