2014-11-21 101 views
0

我正在嘗試做一個拖動事件的表。我想防止垂直拖動;我怎麼能做到這一點?如何防止垂直拖動

請檢查this fiddle。我試圖一次只拖動一行,並且需要防止垂直拖動。

請更新小提琴。

function rangeMouseMove(e) { 
    if (isDragging) { 
    var allCells = $("#table td"); 
    dragEnd = allCells.index($(this)); 
    selectRange(); 
    }    
} 

回答

0

你會考慮像Hammer.js這樣的庫嗎?

關於你的問題,你可以有一個FIFO陣列。將事件從左側拖出,從右側拖出。只有橫向拖動事件被允許在

// pseudo code 
var q = []; 

$t.on('drag', function (e) { 
    if (e.direction === 'left' || e.direction === 'right') { 
    q.push(e.deltaX); 
    } 
}); 

setTimeinterval(function() { 
    if (q.length) { 
    _apply(q.shift()); 
    } 
}, 100); 
1

如果妳想要去hammer.js..then它會幫助ü:

爲了改善用戶體驗,同時做一個手勢,您應該防止瀏覽器從滾動。這可以通過ev.gesture.preventDefault()方法來完成。對於垂直重擊,拖動應當防止,或它不會工作(在大多數情況下。)

最佳的整體體驗,您可以設置的preventDefault選項設置爲true。這使得Hammer可以完全控制給定元素上的觸摸輸入。但它會禁用所有默認瀏覽器操作。

水平輕掃和拖動

var options = { 
    dragLockToAxis: true, 
    dragBlockHorizontal: true 
}; 
var hammertime = new Hammer(element, options); 
hammertime.on("dragleft dragright swipeleft swiperight", function(ev){ }); 

變換(開合,旋轉):

var options = { 
    preventDefault: true 
}; 
var hammertime = new Hammer(element, options); 
hammertime.on("transform", function(ev){ }); 

垂直的掠過並拖動:

由於垂直運動是非常設備上的棘手問題,人們都會介意要滾動,你應該儘量避免這些。如果你確實需要它們,配置Hammer的最好方法就是防止默認設置。

var options = { 
    preventDefault: true 
}; 
var hammertime = new Hammer(element, options); 
hammertime.on("dragup dragdown swipeup swipedown", function(ev){ }); 

一把錘子可以統治他們all..hope它幫助..!