开发者

Why is this code breaking jquery UI drag & drop (with isotope)

开发者 https://www.devze.com 2023-03-27 11:46 出处:网络
I have a page with a grid of items. Each of these items can be dragged onto one of four divs and gets added to that div. This is done using jQuery and JQuery UI draggable/droppable.

I have a page with a grid of items. Each of these items can be dragged onto one of four divs and gets added to that div. This is done using jQuery and JQuery UI draggable/droppable.

The first isotope item can be dragged onto any of the divs. However, the 2nd & 3rd isotope items don't recognize the first droppable div, but when dragged onto the 2nd droppable div, will be added to the first droppable div.

The 4th & 5th draggable items (isotopes) don't recognize the first or second droppable di开发者_开发技巧v, but when dragged over the 3rd droppable, gets added to the 2nd droppable.

So somehow the droppable is getting confused as to where the items are being dropped.

When I comment out the following code, the drag and drops work properly. Any ideas as to why this code would affect the droppable areas??

jQuery('div.container').isotope({
 itemSelector: 'div.sub-item', 
 resizesContainer : false,
 layoutMode : 'fitColumns',
 getSortData :{ 
   fitOrder : function ($item){
    var order, 
       index = $item.index();
       if($item.hasClass('sub-item-big') && index % 2) {
            order = index +1.5;
            } else {
            order = index;
            }
        return order;
       }
   },
 sortBy : 'fitOrder'
});

--------------- update ------------------

After some more playing around with this, I decided to add 'destroy' the isotope upon initiating a drag.

  jQuery('div.sub-item').draggable({
         helper: function(){
                jQuery('div.container').isotope('destroy');
                return jQuery(this).clone().appendTo('body');
          }
    })

When I run it this way, the items are being dropped into the correct container.

The isotope documentation says their is a 'remove' function, there are two problems with that.

1) the documentation says it removes the 'specified item elements from Isotope widget and the DOM', but I don't want to remove the item from the widget or from the dom, I just want to remove the isotope functionality

2) I get an error 'cannot call methods on isotope prior to initialization, attempted to call method remove' - but in this case the isotope was initialized, but possibly not on the object that was cloned?? This is above my abilities, though I'm hoping to learn.

Now that I have found one way of correcting this error, I could destroy isotope upon a drag, and then re-initialize isotope after the drag is complete, or the item is let go, but that seems to be inefficient.

0

精彩评论

暂无评论...
验证码 换一张
取 消