Helper Clone() 的 jQuery UI 可拖动滚动问题答案

【问题标题】：jQuery UI Draggable Scroll Issue with Helper Clone()Helper Clone() 的 jQuery UI 可拖动滚动问题
【发布时间】：2014-09-09 10:49:34
【问题描述】：

我正在创建一个应用程序，用户可以在其中将图像拖放到 div 上。但是图像很大，因此可放置的 div 可以位于页面底部。因此，我需要一个功能，当用户拖动图像并尝试拖动到页面底部以到达可放置的 div 时，页面应该滚动。

这是我的可拖动代码

$(".drag-img").draggable({
    cursor: "move",
    scroll: true,
    revert: "invalid" ,
    helper: function(){
        $copy = $(this).clone();
        return $copy;
    },
    appendTo: 'body',
    scroll: false
});

Jquery UI 有选项 'scroll':true，但它不适用于 clone() 助手。您有什么建议还是我遗漏了什么？

【问题讨论】：

您能否提供一个不能与克隆助手一起使用的最小演示？据我所知，它工作正常。可能是您的代码有问题。

标签： jquery html jquery-ui

【解决方案1】：

尝试用具有 position: relative; 的 div 包裹溢出的 div并添加位置：相对；到你的溢出 div

<div style="position: relative;">
<div style="position:relative; background-color: red; width: 500px; height: 100px; overflow: auto;">
    <table id="nfTable" class="treeTable">
        <tr><td><span class="parent initialized expanded">drop here</span></td></tr>
        <tr><td><span class="draggable">drag me</span></td></tr>
        <tr><td><span class="draggable">drag me</span></td></tr>
        <tr><td><span class="draggable">drag me</span></td></tr>
        <tr><td><span class="droppable">drop here</span></td></tr>
        <tr><td><span class="droppable">drop here</span></td></tr>
        <tr><td><span class="draggable">drag me</span></td></tr>
        <tr><td><span class="draggable">drag me</span></td></tr>
        <tr><td><span class="draggable">drag me</span></td></tr>
        <tr><td><span class="draggable">drag me</span></td></tr>
        <tr><td><span class="droppable">drop here</span></td></tr>
        <tr><td><span class="droppable">drop here</span></td></tr>
        <tr><td><span class="droppable">drop here</span></td></tr>
        <tr><td><span class="droppable">drop here</span></td></tr>
    </table>
</div>

【讨论】：

【解决方案2】：

来自draggable 文档：

scroll 默认：true

如果设置为 true，容器会在拖动时自动滚动。

无论助手是否克隆，这都可以正常工作。确保您没有为使用 UI 初始化的元素指定 css overflow 属性。

可能相关：JqueryUI Sortable scrolling issue

【讨论】：