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

私は今、ほとんど同じ問題を抱えています。方向性と素晴らしい例をありがとう@Bali Balo。他の誰かが必要な場合は、彼のコードの 2 次元スクロール バリアントを表示したいだけです。

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

すべてのドラッグ イベントでドロップ可能な領域を検索しないように最適化を追加しました。ドラッグ可能なウィジェットを初期化する前に事前に計算しました。これにより、ドラッグのパフォーマンスと応答性が大幅に向上しました。

もう 1 つのマイナーな変更は、moveUp と moveDown の関数名が時々入れ替わっているように見えることです (逆に名前を変更しました)。

于 2013-08-07T13:42:45.130 に答える