3

使用 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>
4

2 回答 2

4

您可以使用该drag事件。

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

于 2012-12-10T21:18:23.917 回答
2

I have almost th the same problem now. Thanks @Bali Balo for the direction and great example. I just want to show 2-dimentional scroll variant of his code if somebody else needs:

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();
            }
        }
    });
},

I added optimization not to search the droppable areas on every drag event - I pre-calculated it before initializing draggable widget. That substantially increased performance and responsiveness of dragging.

One more minor change is that it looks like moveUp and moveDown function names were interchanged ocasionally (I renamed them vise versa).

于 2013-08-07T13:42:45.130 回答