Question

这是一个jsFiddle，所以你可以清楚地看到我将要描述的内容：

http://jsfiddle.net/c26SK/5/

我有两个盒子。左手一个用物品填充，物品可以拖到右手边。

右侧框中的项目可以重新排列。项目垂直堆叠。

两个盒子都是一个设定的高度。如果项目超出右侧框的下限，我想要一个滚动条出现。

我想做的事情（如果可能的话）是：

当我在右侧框中拖动项目时，我希望能够在上下拖动项目时重新排列项目，但是，如果我还想检测项目是否已被拖动到右侧外手提箱。

不幸的是，现在发生的所有事情都是项目在水平和垂直方向都在右侧框内滚动。

理想情况下，我想要overflow-y: auto; overflow-x: visible之类的东西，我知道这是不可能的。然后我会看到物品的x，y坐标是否在掉落时位于右侧框内。

我一直在玩appendTo，看看能否解决问题，但到目前为止还没有运气。

我想做的是可以实现的吗？谁能帮我吗？非常感谢！

Answer 1

这远非完美甚至是解决方案，但我认为这是朝着正确方向迈出的一步。

我在out事件中添加了一个函数，用于检查您是否将可排序项目拖回到可排序列表中。如果没有，它会将项目附加到正文。它不漂亮，可能效率不高。

out: function (event, ui) {
    if(!$(event.toElement).hasClass('ui-draggable')&&!$(event.toElement).is('#rightitems')) {
        ui.item.appendTo('body')            
    }
}

定位存在一些明显的问题，但希望它可以使用。你还必须处理元素的drop事件，因为我还没有尝试过使用此代码的任何事件

JSFiddle

模仿`overflow-y：auto;在jQuery UI可排序对象上的overflow-x：visible`

1 个答案: