Question

即使我在其他问题上看到了同样的问题，我也使用了搜索功能并找不到问题的答案。我需要那个＆＃34; .draggable＆＃34;滚动＆＃39;＃div1＆＃39;当你介绍元素。我把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()滚动到某个预定义的位置。＆＃34;接受可拖动的＆＃34; 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。我还进行了一些其他调整，因此您实际上可以看到它正常工作（请注意，您不能在div元素之上定期position:relative;float:left;，因此我＆＃39 ; m还将.demo类添加到其中）

如果您希望.demo - s接受丢弃，您不希望整个容器#div1成为可放置的元素。你可以做的是，在拖动你的可拖动元素的同时满足某些条件时操纵它的.scrollTop值。

您可以使用dropraable上的可拖动或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

jQuery UI问题，droppable和溢出滚动

1 个答案: