jQuery可拖动滚动容器

Question

我目前有一个简单的可拖动列表，我希望它能在一个div内（即项目）并且可以滚动。

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

我目前有这个示例：http://jsfiddle.net/YvJhE/660/。但是，正如您所看到的，可拖动元素停留在元素容器内，我希望它们能够拖出去，同时在元素数量超过容器长度时，能够在元素容器内滚动。

是否有人可以为我指明正确的方向？

- Dennis Smink

Answer 1

jQuery使用一个助手对象来处理这类交互，您可以将其附加到另一个DOM元素上：

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

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

$('#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元素移动到它被放置的位置，或者根据您要使用它的方式重新创建它。

- Joakim Johansson

Answer 2

选项helper: 'clone'会自动克隆您正在拖动的项目，以便可以将其拖出容器：

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

- Madalina Taina

Answer 3

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

所以您可以放弃使用父元素 "elements"，然后您可以将它们拖到任何位置。

或者您可以通过使用宽度和高度为 100% 来使父元素变大。

如果您在 bootstrap 容器中使用 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>

- Brain