jQuery可拖动滚动容器

Posted 2023-05-08

【中文标题】jQuery可拖动滚动容器

【英文标题】：jQuery draggable scrollable container

【发布时间】：2015-11-29 00:21:07

【问题描述】：

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

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

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

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

谁能让我走上正轨？

【参考方案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 元素移动到它被丢弃的位置，或者根据您的用途重新创建它。

【参考方案2】：

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

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

【参考方案3】：

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

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

或者你可以让父元素更大，使用宽度和高度为 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>