Question

我正在创建一个应用程序，用户可以将图像拖放到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有选项＆＃39; scroll＆＃39;：true，但它不能使用clone（）帮助器。你有什么建议或者我错过了什么吗？

Answer 1

尝试使用div位置包裹溢出div：position; relative;并添加位置：相对;你的溢出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>

Answer 2

来自draggable文档：

scroll默认：true

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

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

可能相关：JqueryUI Sortable scrolling issue

Helper Clone的jQuery UI可拖动滚动问题（）

2 个答案: