jQuery UI 问题，可放置和溢出滚动

Question

即使我在其他问题上看到了同样的问题，我也使用了搜索并没有找到问题的答案。引入元素时，我需要“.draggable”滚动“#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>

Answer 1

您的代码中有几个错误：

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

现在，据我了解，您正在尝试做的是使.droppable() 在接受.draggable() 时滚动到某个预定义的位置。 droppable 中的“接受可拖动”事件实际上称为drop：

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

（还有一个accept 选项，但以这种方式使用它会滥用它的目的）

我已将其放入您的fiddle here as a demo。我还进行了一些其他调整，因此您实际上可以看到它在工作（请注意，您不能在 position:relative;float:left; 元素之上使用常规 divs，因此我还将 .demo 类添加到他们）

---

如果您希望.demo-s 接受丢弃，您不希望将整个容器#div1 设为可丢弃元素。您可以做的是，只要您在拖动可拖动元素时满足某些条件，就可以操纵其 .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 时。

Here's another fiddle 显示此与您的示例一起使用。要使其滚动，请将可拖动对象拖到 #div1 容器的顶部或底部。

您可能想要做的进一步扩展是让它在鼠标指针静止时平滑滚动。您可以通过创造性地使用setTimeout 或setInterval 来做到这一点；我不会对此进行详细介绍，因为您可以在以下任一问题中找到很好的解释：jQuery open div on hover; automatic scroll through 和 Scroll on hover, click for speed