jQuery UI问题，可掉落和溢出滚动

jQuery UI issue, droppable and overflow scroll

本文关键字：溢出 滚动 UI 问题 jQuery      更新时间：2023-09-26

我使用搜索并没有找到我的问题的答案，即使我在其他问题上看到了同样的问题。我需要这个。"当你引入元素时，可拖动滚动#div1。我把jsFiddle: http://jsfiddle.net/carlosnufe/7Rxst/

jQuery: 

$('.draggable').draggable({
    appendto : "#div1",
    helper  : "clone"
})
$('#div1').droppable({
    scroll: true,
});
HTML: 

<div id="div1">
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
  </div>
  <div id="div2">
    <div class="draggable"></div>
  </div>

您的代码中有几个错误:

appendto : "#div1", // I assume this is a typo of "appendTo"
// ...
scroll: true, // AFAIK there is no option called "scroll" on a droppable

现在，据我所知，你要做的是使.droppable()滚动到一些预定义的位置，当它接受.draggable()。可拉件中的"accept a draggable"事件实际上叫做drop:

$("#div1").droppable({
    drop: function() {
        // myPosition can be this.height if you want to scroll all the way down
        $(this).scrollTop(myPosition);
    }
});

(也有一个accept选项，但以这种方式使用它将滥用其目的)

我把这个放在你的小提琴里作为演示。我还做了一些其他的调整，所以你实际上可以看到它的工作(注意，你不能有常规的div的position:relative;float:left;元素的顶部，因此我也添加了.demo类给他们)

如果您希望.demo -s接受drop，则不希望将整个容器#div1设置为可drop元素。你所能做的是，当你在拖动可拖动元素时满足某些条件时，操作它的.scrollTop值。

您可以在可拖拽对象上使用drag事件或在可拖拽对象上使用over事件执行此操作。这是个人喜好的问题，因为两者都很贵，但我更喜欢第二个:

$('.demo').droppable({
    over: function(e, ui) {
        if(conditionForScrollingUp) {
            // scroll container up
            $("#div1").scrollTop($("#div1").scrollTop() - magicNumber);
        } else if(conditionForScrollingDown) {
            // scroll container down
            $("#div1").scrollTop($("#div1").scrollTop() + magicNumber);
        }
    }
});

不幸的是，这将减慢您的页面相当多，特别是如果您有大量的div.demo -s。

这里是另一个小提琴，显示它与您的示例一起工作。要使其滚动，将可拖动对象拖到#div1容器的顶部或底部。

一个进一步的扩展，你可能要做的是让它顺利滚动，而你的鼠标指针是站着不动。您可以创造性地使用setTimeout或setInterval来做到这一点;我不会详细说明这个问题，因为您可以在这两个问题中找到很好的解释:jQuery opendiv on hover;自动滚动和滚动悬停，点击速度

相关文章：