jqueryUI sortable / draggable和overflow(或z-index?) - 不一致的行为

时间:2012-03-14 16:11:13

标签: jquery css jquery-ui jquery-ui-sortable

我遇到了jqueryUI sortable的问题以及我正在处理的页面中的溢出属性 - 我已将它的版本放在我的公共Dropbox上:
http://dl.dropbox.com/u/846812/stage_edit/stage_edit.html

如果您抓住右侧容器中的一个蓝色框(通过灰色条拾取它),您可以将其拖到左侧(或右侧)并保持可见。但是,如果你从左边抓住其中一个框并将其拖出来,它隐藏在右手边,或者至少在它越过后你看不到它。此外,左手容器(#droppable-stage)沿x展开以保持盒子在里面,即使它位于右侧(#droppable-resource-list)之下。

那里,因为你可以看到灰色框显示它出现的位置,当你放下它时它会显示在右侧。只是当它处于拖动状态时,你才能看到它。

我无法弄清楚为什么会发生这种情况,特别是为什么右边与左边会有所不同。我不知道问题是用css还是用jquery-ui draggable / sortable javascript。我已经尝试通过使用css来解决它无法使用 - 例如,如果我将style="overflow:visible;"放在#droppable-stage上,那么拖动工作正常但我失去了y溢出:即资源div(蓝色和绿色方框)从底部溢出。

我尝试将overflow-x设置为visible并将overflow-y设置为auto,以为这意味着我可以将蓝色框拖出两侧,但左侧仍然有一个滚动条,但这不起作用:奇怪的是,它似乎特别是overflow-y属性决定了我是否可以向左或向右拖动一个框,这对我来说没有意义。

任何想法,任何人?

1 个答案:

答案 0 :(得分:0)

它不是右边的容器有更高的z索引或任何东西,左边的容器被设置为包含元素并在必要时通过overflow: auto;属性滚动。

当我在overflow: visible;上更改了可见属性div#droppable-stage,然后抓取的droppables不再出现离开左列空间的问题