Javascript jQuery UI问题、可拖放和溢出滚动

我使用了搜索，但没有找到我的问题的答案，即使我在其他问题上看到了相同的问题。引入元素时，我需要“.draggable”滚动“#div1”。我把JSFIDLE放在：

jQuery：

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

HTML:

---

您的代码中有几个错误：

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

现在，据我所知，您试图做的是使

.droppable（）

在接受

.draggable（）

时滚动到某个预定义的位置。可拖放中的“接受可拖放”事件实际上称为

drop

：

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

（还有一个

accept

选项，但以这种方式使用它将滥用其用途）

我把这个放在你的书包里了。我还做了一些其他的调整，因此您可以看到它在工作（请注意，您不能在

位置：relative；float:left；

元素上有常规的

div

s，因此我还向它们添加了

.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时

用您的示例演示这一点。要使其滚动，请将可拖动对象拖动到

#div1

容器的顶部或底部

---

您可能需要做的另一个扩展是在鼠标指针静止时使其平滑滚动。您可以创造性地使用

setTimeout

或

setInterval

；我不会详细说明这一点，因为你可以从以下两个问题中找到很好的解释：

你的JSFIDLE是空的。@carlosnufe也总是在这里发布你的代码，而不是欺骗系统。多亏了这么多肮脏的流程，你的pov（点…）非常有趣，但并不是我想要的。真的，我需要把.dragable元素放到.demo元素中。我的问题是，当我拖入.demo元素（在我的真实代码中）时，我无法放入隐藏的元素，我要求一种自动滚动。对不起，我的英语；）太神了真是太棒了。非常感谢你

$('.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);
        }
    }
});