Question

我目前有一个简单的可拖动列表，我希望它位于div（项目）内并可滚动。

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

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

但是正如你所看到的那样，draggable元素保留在元素容器内部，我希望它们能够拖出来，但是一旦有更多元素，就能够在元素容器内滚动，而不是容器长是

有人能让我走上正轨吗？

Answer 1

jQuery使用可以附加到另一个DOM元素的辅助对象处理这些交互：

$( ".draggable" ).draggable({
    helper: 'clone',
    appendTo: '#outer'
});

然后你可以在某个地方放置一个droppable：

$('#dropspace').droppable({
    accept: '.draggable',
    drop: function( event, ui ) {
        window.alert('Element dropped at left: ' + ui.position.left + '; top: ' + ui.position.top);
    }
});

概念证明：http://jsfiddle.net/YvJhE/662/

你仍然需要将实际的dom元素移动到它被删除的位置，或者根据你将要用它来重新创建它。

Answer 2

选项helper: 'clone'复制您自动拖动的项目，以便将其拖出容器：

jQuery(".draggable").draggable({
    helper: 'clone',
    revert: 'invalid',
    appendTo: 'body'
});

Answer 3

实际上这是一个很好的问题，因为它揭示了JQuery如何处理可拖动元素。您的可拖动元素无法拖出父元素＆＃34;元素＆＃34; div，因为它本身就代表了对它们的限制。

因此您可以放弃使用父元素＆＃34;元素＆＃34;，然后您可以将它们拖动到任何您想要的位置。

或者你可以使用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;
}

HTML：

<div id="elements"/>

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

jQuery可拖动的可滚动容器

3 个答案: