jQuery UI draggable / droppable溢出隐藏

时间:2013-09-10 13:36:29

标签: jquery css jquery-ui drag-and-drop

这似乎是一个常见的问题,但出于某种原因,我根本无法想到解决方案。

我正在构建一个需要拖放功能的网站。但是,滑块内有多个项目。显然,滑块内有overflow hiddenrelative positioning,因此幻灯片可以正常工作。

这两个属性的组合意味着当从div拖动图像时,它会被溢出切断。如果没有相对定位,则溢出不会影响拖动的元素。

但是,我很确定每个滑块/滑块都有相对定位以及隐藏溢出,因为它们需要正常工作。

但是,有人能想到解决方案吗?

Here's a reduced test case for the site。我没有包含滑块js,但是有位置/溢出的基本css用于显示问题。

对于那些希望检查代码的人,我使用的滑块是swipe.js

.items .item.site-wrap移除位置会向您显示拖放功能如何与overflow: hidden一起使用。

[编辑]

我注意到jQuery UI一旦开始被拖动就会向元素添加一个类。我开始考虑是否有办法锁定它以改变该特定元素的溢出值。但是将其更改为overflow: none似乎没有做任何事情,问题似乎与两个父元素有关,当然不能改变,因为用户可以拖放多个项目。

1 个答案:

答案 0 :(得分:0)

在您的可拖动电话中尝试使用可拖动的appendTo选项。

$( ".big-item" ).draggable({ 
    snap: ".big-dropzone",
    revert: "invalid", 
    helper: "clone", 
    opacity: 1,
    cursor: "move",
    appendTo: ".big-dropzone"
});

这里是您示例的codepen分叉