jQuery可拖动可滚动容器

jQuery draggable scrollable container

本文关键字：拖动 jQuery 滚动      更新时间：2023-09-26

我现在有一个简单的可拖动列表，我想把它放在div(项目)里面，并且是可滚动的。

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

我现在有这个小提琴:http://jsfiddle.net/YvJhE/660/

但是正如你所看到的，可拖拽元素留在元素容器内，我希望它们能够拖出，同时也能够在元素容器内滚动，只要有更多的元素，超过容器长度

谁能告诉我正确的方向?

jQuery处理与helper对象的交互，您可以将该对象附加到另一个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元素移动到它被放置的位置，或者根据您要使用它的目的重新创建它。

选项helper: 'clone'自动克隆你正在拖动的项目，以便它可以被拖出容器:

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

实际上这是一个很好的问题，因为它揭示了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>
相关文章：