jQuery切换(隐藏/显示)可放置面板时的奇怪行为 [英] jquery strange behaviour when toggling (hiding/showing) droppable panels
问题描述
根据此处发布的代码，我有几个可拖动/隐藏的框: http://webdeveloperplus.com/jquery/saving-state -for-collapsible-drag-drop-panels/
我还有一个区域，其中包含一个块列表，可以将其拖动到这些框中的任何一个中，然后对其进行排序.这很好.只有当我开始切换这些框或移动它们的位置时，事情才开始变得怪异.
示例1
假设我有3个垂直堆叠的盒子:
Box1
Box2
Box3
可以将块拖入(并排序)确定.然后，如果我将Box2移到Box1上方，那么现在的顺序是:
Box2
Box1
Box3
我无法将任何东西拖到Box2中.我在Firebug中没有任何错误.没事.
示例2
如果我在上方具有相同顺序的框(Box1，Box2，Box3)并且隐藏"了Box2的内容，则无法将任何内容拖到Box3中.如果我再次显示" Box2，则可以将其拖到Box3中，但不能拖到Box2中.
如果我设置了以下框，并且隐藏了Box3，则无法将任何内容拖到Box4&中.方格5.如果然后显示Box3，则只能拖动到Box3中.
Box1
Box2
Box3
Box4
Box5
有什么主意吗?我正在使用通常的可拖动&可排序的函数(由于某些原因而不能将其丢弃，因为将droppable与sortable结合使用会触发两次droppable事件-这个论坛上的另一个用户指出了一种奇怪的现象).我必须指出，启动此代码时，只会加载一个框，然后单击一个按钮来创建新框.这是一个构建新框并将其设置为可拖动/可排序区域的功能.
干杯:)
-UPDATE -------------------------
我使用大多数'webdeveloperplus'代码(此章的巨大荣誉)创建了一个简化的视图.它可以在这里找到:jsfiddle.net/gD94w/4(顺便说一下，我很喜欢这个jsfiddle网站！).您应该能够复制我的问题(将项目"拖到蓝色区域).我想知道的任何想法！谢谢.
我遇到了完全相同的问题，但是我的代码略有不同.我设法弄清楚jquery会记住可排序对象的位置，因此，如果您移动或更改它(使用切换或对父元素进行排序)，那么它将忘记其位置.
解决方案是每当其位置更改时刷新可排序对象.就我而言，我将以下代码附加到了父可排序项的update事件和切换上:
$('.sortable-item').sortable('refresh');
更新:
我将Jsfiddle分叉成一个新的: http://jsfiddle.net/zf26q/
注意增加的内容:
$('.draggedcontent').sortable('refresh');
update: function(event, ui){
$('.draggedcontent').sortable('refresh');
}
我无法复制问题.让我知道这是否可以解决您的问题.
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.
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.
这篇关于jQuery切换(隐藏/显示)可放置面板时的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
