jquery strange behaviour when toggling (hiding/sho

问题:

I have several draggable/hideable boxes based on the code posted here: http://webdeveloperplus.com/jquery/saving-state-for-collapsible-drag-drop-panels/

I also have an area with a list of blocks which I can drag into any one of these boxes, and then sort them. This works fine. It's only when I start toggling these boxes, or moving their positions, that things start going weird.

Example 1

Let's say I have 3 boxes stacked vertically:

Box1

Box2

Box3

Block can be dragged into (and sorted) ok. If I then move Box2 above Box1 so the order is now:

Box2

Box1

Box3

I can't drag anything into Box2. I don't get any errors in Firebug. Just nothing happens.

Example 2

If I have the same order of boxes above (Box1, Box2, Box3) and I 'hide' the contents of Box2, I cannot drag anything into Box3. If I then 'show' Box2 again, I can drag into Box3 but not Box2...

If I have the following boxes set up and I hide Box3, I cannot drag anything into Box4 & Box5. If I then show Box3, the only box I cannot drag into is Box3:

Box1

Box2

Box3

Box4

Box5

Any ideas off the top of your head? I'm using the usual draggable & sortable functions (not droppable as for some reason using droppable with sortable was firing the droppable event twice - a strangeness noted by another user on this forum). I must point out that when you launch this code only one box is loaded, and you click a button to create new boxes. This is a function which builds the new box, and sets it up as a draggable/sortable area.

Cheers :)

--UPDATE-------------------------

I have created a simplified view, using the majority of 'webdeveloperplus' code (huge kudos to this chap). It's available here: jsfiddle.net/gD94w/4 (I am loving this jsfiddle site by the way!). You should be able to replicate my problem (drag 'items' into the blue areas). Any ideas I'd love to know! Thanks.

回答1:

I was having the same exact issue, but my code was slightly different. I managed to figure out that jquery will remember the position of the sortable, so if you move it or change it (with toggle or sorting the parent element), then it will forget its position.

The solution is to refresh the sortable every time its position is changed. In my case, I attached the following code to the parent sortable's update event and my toggle:

$('.sortable-item').sortable('refresh');

UPDATE:

I forked the Jsfiddle into a new one: http://jsfiddle.net/zf26q/

Notice the additions:

$('.draggedcontent').sortable('refresh');

update: function(event, ui){
     $('.draggedcontent').sortable('refresh');   
}

I can't replicate the problem. Let me know if that solves your issue.