使用 jQuery UI 可拖动/可放置滚动多个放置容器？答案

【问题标题】：Scroll multiple drop containers with jQuery UI draggable/droppable?使用 jQuery UI 可拖动/可放置滚动多个放置容器？
【发布时间】：2012-11-28 07:34:24
【问题描述】：

使用jQuery UI draggable/droppable，当可拖动对象被拖到它们上面时，如何强制多个放置容器滚动？

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

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

注意：draggable({ scroll: true }) 选项在此处不起作用，因为可拖动对象不是任一放置容器的子项。

以及一些满足 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>

【问题讨论】：

标签： jquery-ui

【解决方案1】：

我现在几乎有同样的问题。感谢@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 函数名称似乎偶尔互换（我将它们重命名为反之亦然）。

【讨论】：

【解决方案2】：

您可以使用drag 事件。

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

【讨论】：