使用jQuery UI draggable / droppable滚动多个drop容器？

Question

使用jQuery UI draggable / droppable，当拖动拖动时，如何强制多个drop容器滚动？

例如，如何在拖动“拖动我”方块时让这些“放置目标”列表滚动？

上述小提琴：http://jsfiddle.net/AdrkG/

注意：draggable({ scroll: true })选项在此处不起作用，因为draggable不是任何drop容器的子项。

一些代码示例满足StackOverflow（否则它会抱怨我只链接到JSFiddle）：

<div class="draggable">drag me</div>

<div class="dropcontainer">
   <div class="droppable">drop target 0</div>
   <div class="droppable">drop target 1</div>
   …
</div>

<div class="dropcontainer">
   <div class="droppable">drop target 0</div>
   <div class="droppable">drop target 1</div>
   …
</div>

<script>
  $(".draggable").draggable()
  $(".doppable").droppable()
</script>

<style>
   .dropcontainer {
       overflow: auto;
       width: 150px;
       height: 100px;
   }
</style>

Answer 1

您可以使用drag事件。

这是一个例子：http://jsfiddle.net/AdrkG/8/

Answer 2

我现在几乎遇到同样的问题。感谢@Bali Balo的方向和伟大的榜样。 我只是想显示他的代码的二维滚动变体，如果有人需要：

var dropContainers = $(".dropContainer");

---

 drag: function (event, ui) {
    dropContainers.each(function () {
        var $this = $(this);
        var cOffset = $this.offset();
        var bottomPos = cOffset.top + $this.height();
        var rightPos = cOffset.left + $this.width();
        clearInterval($this.data('timerScroll'));
        $this.data('timerScroll', false);
        if (event.pageX >= cOffset.left && event.pageX <= cOffset.left + $this.width()) {
            if (event.pageY >= bottomPos - triggerZone && event.pageY <= bottomPos) {
                var moveDown = function () {
                    $this.scrollTop($this.scrollTop() + scrollSpeed);
                };
                $this.data('timerScroll', setInterval(moveDown, 10));
                moveDown();
            }
            if (event.pageY >= cOffset.top && event.pageY <= cOffset.top + triggerZone) {
                var moveUp = function () {
                    $this.scrollTop($this.scrollTop() - scrollSpeed);
                };
                $this.data('timerScroll', setInterval(moveUp, 10));
                moveUp();
            }
        }
        if (event.pageY >= cOffset.top && event.pageY <= cOffset.top + $this.height()) {
            if (event.pageX >= rightPos - triggerZone && event.pageX <= rightPos) {
                var moveRight = function () {
                    $this.scrollLeft($this.scrollLeft() + scrollSpeed);
                };
                $this.data('timerScroll', setInterval(moveRight, 10));
                moveRight();
            }
            if (event.pageX >= cOffset.left && event.pageX <= cOffset.left + triggerZone) {
                var moveLeft = function () {
                    $this.scrollLeft($this.scrollLeft() - scrollSpeed);
                };
                $this.data('timerScroll', setInterval(moveLeft, 10));
                moveLeft();
            }
        }
    });
},

我添加了优化，不在每个拖动事件中搜索可放置区域 - 我在初始化可拖动小部件之前预先计算了它。这大大提高了拖动的性能和响应能力。

另一个小改动是看起来像moveUp和moveDown函数名称偶尔互换（我将它们重命名为反之亦然）。