jQuery可拖动的可滚动容器

Question

我目前有一个简单的可拖动列表,我想在div(项目)和可滚动内.

$( ".draggable" ).draggable();

我目前有这个小提琴:http://jsfiddle.net/YvJhE/660/

但正如您所看到的,可拖动元素保留在元素容器内部,我希望它们能够拖出,但是一旦有更多元素,就能够在元素容器内滚动,而不是容器长.

谁能让我走上正轨？

Answer 1

实际上这是一个很好的问题，因为它揭示了 JQuery 如何处理可拖动元素。您的可拖动元素不能拖动到父“元素”div 之外，因为它本身代表了对它们的限制。

所以你可以放弃使用父元素“elements”，然后你可以将它们拖到任何你想要的地方。

或者您可以使用 100% 的宽度和高度来增大父元素。

如果您在引导容器内使用 Draggable，您会注意到它们可以被拖动到容器的边界，但永远不会超出容器的边界。

您还可以尝试将可拖动元素放置在父元素之外，并具有绝对位置。

CSS：

.draggable{
   width: 60px;
   z-index: 15;
   margin: 0 auto;
   position: absolute;
}

#elements{
        overflow: scroll;
        position:absolute;
        left:20px;
        width:100%;
        height:100%;
        background:#fff;
        border:1px solid #000;
        z-index:5;
        padding:10px;
        font-size: 10px;
}

网页：

<div id="elements"/>

<div id="" class="draggable ui-widget-content">
    <p>Drag me around</p>
</div>