vue - jquery ui sortable

更新的答案

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

我覺得檢測一個滾動事件發生在視口實際工作。 您可以設置滾動速度和靈敏度。

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值。 也許你可以提交一個票的增強？

您可能可以通過拖曳功能（ 基於這個答案 ）來改變它。 看到在這里工作的例子： 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 。

所有似乎JSuar的作品的解決方案，我也想嘗試一下。

用jQuery UI解決問題Draggable Widget是不可能的。

沒有明確的功能獲取有關物體是垂直還是水平移動的信息。 事實上，在大多數情況下，物體在兩個方向上移動 。 但是我們可以定義我們自己的函數來查看光標是如何移動的

使用自定義函數來獲取有關拖動對象的信息

這個想法是在mousemove上觸發一個事件並且每次都檢查一下游標的位置。 在mousemovements的某個intervall之後 ，我們檢查整體移動來設置scrollsensitivity。 在這種情況下，我們只是假設用戶將很可能在相同的方向拖動下一個運動。

這是一個可用的JSFiddle示例。

HTML

<div id="viewPort">
    <div id="draggable">drag me</div>
</div>

CSS

#viewPort {
    width: 300px;
    height: 300px;
    background: #fff;
    overflow:scroll;
    border:1px solid #ccc;
}
#draggable {
    color: #fff;
    width: 75px;
    height: 75px;
    padding: 10px;
    background: #333399;
    border:1px solid #ccc;
    margin:5px;
}

JS

//current count of how often we got the mouse positon
var count = 0;
//position of mouse at last function call
var lastPositionX;
var lastPositionY;
//how often we moved in one direction in the last intervall
var movedX;
var movedY;
//intervall to check movement again
var countIntervall = 30;

$("#draggable").draggable({
    scrollSensitivity: 1000,
    scrollSpeed: 40,
    revert: function (event, ui) {
        $("#draggable").originalPosition = {
            top: 0,
            left: 0
        };
        return !event;
    },
    drag: function (e) {
       setScrollSensivity();
    }
});

//init first mousepostion
$("#draggable").on('click', function() {
    lastPositionX = event.pageX;
    lastPositionY = event.pageY;
});

function setScrollSensivity(){
    count++;

    //get current mousepostion
    var currentPositionX = event.pageX; 
    var currentPositionY = event.pageY; 

    //increase if moved on chose axis
    if ( currentPositionX != lastPositionX ){
        movedX++;
    }

    if ( currentPositionY != lastPositionY ){
        movedY++;
    }

    //if moved more on x axis decrease sensivity, else increase.
    if (count == countIntervall){
        if (movedX > movedY){
            console.log("moving on X axis");
            $( "#draggable" ).draggable( "option", "scrollSensitivity", 10 );
        } else {
            console.log("moving on Y axis");
            $( "#draggable" ).draggable( "option", "scrollSensitivity", 200 );
        }
        //reset all the counters and start again
        count = 0;
        movedX = 0;
        movedY = 0;
    }
    //set last position for our next function call
    lastPositionX = currentPositionX;
    lastPositionY = currentPositionY;
}