jquery - 使用jquery uidraggable，是否可以在垂直和水平方向上具有不同的滚动灵敏度？

Question

我正在使用jquery ui draggable我意识到当我向上拖动(相对于左/右)时，我希望滚动灵敏度小得多。垂直与水平拖动是否可以有不同的设置？

这是我当前的代码

   $(".myDraggable").draggable(
            {
                stack: ".myDraggable",
                scroll: true,
                scrollSensitivity: 250,
                scrollSpeed: 40,
                revert: function (event, ui) {
                    $(this).data("uiDraggable").originalPosition = {
                        top: 0,
                        left: 0
                    };
                    return !event;
                }
            }
        );

Answer 1

更新答案

工作示例: http://jsfiddle.net/22bpbsrw/3/

我认为检测视口(viewport)中何时发生滚动事件确实有效。然后您可以设置滚动速度和灵敏度。

var lastScrollTop = 0,
    lastScrollLeft = 0,
    delta = 5;
$('#viewPort').scroll(function (event) {
    var st = $(this).scrollTop();
    var sl = $(this).scrollLeft();

    if (Math.abs(lastScrollTop - st) > delta) {
        $("#draggable").draggable("option", "scrollSensitivity", 5);
        $("#draggable").draggable("option", "scrollSpeed", 10);
        (st > lastScrollTop) ? console.log('scroll down') : console.log('scroll up');
        lastScrollTop = st;
    }

    if (Math.abs(lastScrollLeft - sl) > delta) {
        $("#draggable").draggable("option", "scrollSensitivity", 100);
        $("#draggable").draggable("option", "scrollSpeed", 40);
        sl > lastScrollLeft ? console.log('scroll right') : console.log('scroll left');
        lastScrollLeft = sl;
    }
});

<小时/>

旧答案

离开只是为了帮助其他人。

您不能为每个方向显式设置不同的 scrollSensitivity 值。也许您可以提交该增强功能的票证？

您也许可以通过拖动功能(based on this answer)来更改它。请参阅此处的工作示例:http://codepen.io/anon/pen/mbups?editors=001

drag: function(e) {    
  console.log($("#drag1").draggable( "option", "scrollSensitivity"));
  if(prevX == -1) { prevX = e.pageX; }
  // dragged left or right
  if(prevX > e.pageX || prevX < e.pageX) { // dragged right
      $("#drag1").draggable( "option", "scrollSensitivity", 100 );
  }
  prevX = e.pageX;
 
 if(prevY == -1) { prevY = e.pageY; } 
  // dragged up or down
  if(prevY > e.pageY || prevY < e.pageX) { // dragged down
      $("#drag1").draggable( "option", "scrollSensitivity", 1 );
  }
  prevY = e.pageY;
}

您可以根据拖动元素的方向设置scrollSensitivity。