jQuery UI 可拖动/可放置溢出隐藏

Question

这似乎是一个常见的问题，但由于某种原因我根本想不出解决方案。

我正在构建一个需要拖放功能的网站。但是，滑块中有多个项目。显然，滑块中有overflow hidden 和relative positioning，以便滑块可以工作。

这两个属性的组合意味着当从div中拖出一张图片时，会被overflow截断。如果没有相对定位，则溢出不会影响被拖动的元素。

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

但是，谁能想到解决办法？

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

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

从.items .item 和.site-wrap 中删除位置将向您展示拖放仍然如何与overflow: hidden 一起使用。

[编辑]

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

Answer 1

尝试在调用 draggable 时使用 draggable 的 appendTo 选项。

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

这是您示例的codepen 分支