Question

我试图用拖动事件做表。我想防止垂直拖动;我怎么能让它成为可能？

请检查this fiddle。我试图一次只拖动一行，并且需要防止垂直拖动。

请更新小提琴。

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

Answer 1

如果你想去锤子，那么它会帮助你：

要在做手势时改善用户体验，您应该阻止浏览器滚动。这可以使用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){ });

一把锤子可以统治它们......希望它能帮助......！

Answer 2

你会考虑像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);

如何防止垂直阻力

2 个答案: