Javascript 当拖动元素而不移动鼠标时，Gridster autoscroll小部件

我正在我的项目中使用gridster jquery插件。我有几个可拖动的小部件分布在许多列上，它们远远超出了视口的宽度。我希望在拖动的小部件接近视口边界时，视口自动滚动。不幸的是，这只在移动鼠标时起作用（它似乎是由位置变化触发的，而不是mousedown事件）

演示。。。尝试将小部件移动到容器的最右侧：

HTML:

JS:

有人知道我怎样才能让自动滚动按我的意愿工作吗

干杯

---

Martin

缺少小提琴链接…很抱歉。链接在第一篇文章中已经更新。我不明白你想要实现什么，你说的“从视口到自动滚动”是什么意思？此外，如果不是鼠标移动，您希望拖动触发什么？鼠标下沉是当你点击鼠标，但如果你在中间拖动，你已经有鼠标按钮点击…老实说，我很困惑…嗨，韦贝诺。我已经创建了一个包含30列的gridster元素，我希望能够轻松地将.box元素从第1列拖动到第30列。当然，并非所有列都适合视图，因此需要滚动条。当我向右拖动.box元素时，我希望即使鼠标未移动，偏移量也会改变（自动滚动）。如果仍然不清楚，请查看此线程中的答案：。我想用gridster也能做到这一点。好吧，你必须先自己尝试一下，然后如果你被它困住了，你可以把它包括在你的问题中。。。我建议你删除这个，因为我非常怀疑是否有人会回答这个问题（事实上，这是一个可能的结尾，因为你实际上没有尝试过任何东西），一旦你尝试过代码，就打开一个新的。。。这个网站是为解决现有代码的故障，而不是为你写新的。。。

<div class="gridster">
    <div class="box" data-row="1" data-col="1" data-sizex="1" data-sizey="1"></div>
    <div class="box" data-row="2" data-col="1" data-sizex="1" data-sizey="1"></div>
    <div class="box" data-row="1" data-col="2" data-sizex="1" data-sizey="1"></div>
    <div class="box" data-row="2" data-col="2" data-sizex="1" data-sizey="1"></div>
</div>

body {
    background-color: #333333;
}

.box {
    background-color: #cccccc;
    width: 100px;
    height: 100px;
}

$(document).ready(function(){
    $(".gridster").gridster({
        widget_selector: '.box',
        widget_margins: [10, 10],
        widget_base_dimensions: [100, 100],
        min_cols: 30,
        max_cols: 30
    })
});