7

スクロール可能なdiv内に複数のドラッグ可能なdivがあります。それらをドロップ可能なゾーン（スクロール可能なdivでもあります）にドラッグすると、ドープ可能なDIVは下にスクロールしません。ページだけが動いています。ドロップ可能なdivだけがドラッグ中にスクロールする必要があると言う方法はありますか？

divをドラッグ可能にするための現在のjqueryコードは次のとおりです

$(".drag_item").draggable({
        helper: 'clone',
        scroll: true, 
        drag: function( event, ui ) {
            $(this).css('z-index','100');
        }
    });

ここに画像の説明を入力してください

4

2 に答える 2

3

私はこの解決策を思いつきました：

var direction = {};
var bound = {};
var scrolling = false;
var container = document.getElementById("container");

$('#table-container')
.on('dragstart', draggable, function(event, ui) {
  bound = {
    right : $(container).offset().left + $(container).width() - 50,
    left : $(container).offset().left + 50,
    top : $(container).offset().top + 50,
    bottom : $(container).offset().top + $(container).height() - 50
  };
})
.on('dragstop', draggable, function(event, ui) {
  direction = {};
})
.on('drag', draggable, function(event, ui) {
  direction.right = event.clientX - bound.right;
  direction.left = bound.left - event.clientX;
  direction.up = bound.top - event.clientY;
  direction.down = event.clientY - bound.bottom;

  if ((direction.right > 0 || direction.left > 0|| direction.up > 0 || direction.down > 0) && !scrolling) {
    scroll();
    scrolling = true;
  } else {
    scrolling = false;
  }
});

function scroll() {
  if (direction.right > 0) {
    container.scrollLeft = container.scrollLeft + (direction.right >> 1); //dividing by 2 to soften effect
  }
  if (direction.left > 0) {
    container.scrollLeft = container.scrollLeft - (direction.left >> 1);   
  }
  if (direction.down > 0) {
    container.scrollTop = container.scrollTop + (direction.down >> 1);
  }
  if (direction.up > 0) {
    container.scrollTop = container.scrollTop - (direction.up >> 1);
  }

  if (direction.right > 0 || direction.left > 0 || direction.up > 0 || direction.down > 0) {
    setTimeout(scroll, 100);
  }
}
于 2013-12-21T01:01:02.820 に答える
1

" overflow=auto" を使用してください。

<div style="overflow:auto;"></div>

また

jQuery は、アニメーション変数として scrollTop をサポートするようになりました。

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});

スムーズにスクロールするために、setTimeout/setInterval を設定する必要がなくなりました。

于 2013-03-21T11:29:41.653 に答える