你能在jQuery中检测到"拖动"吗？

Question

当用户点击链接时,我会出现一个悸动.

问题是可以单击并拖动相同的链接以重新排列.在这种情况下,我不需要出现悸动.它只需要出现,如果它实际上等待去某个地方.

我怎样才能使用jQuery创建一个事件监听器,只有当它点击一个链接而不是点击并拖动时才会出现一个throbber？

Answer 1

在mousedown上,开始设置状态,如果mousemove事件被触发记录它,最后在mouseup上,检查鼠标是否移动.如果它移动了,我们一直拖着.如果我们没有动,那就是点击.

var isDragging = false;
$("a")
.mousedown(function() {
    isDragging = false;
})
.mousemove(function() {
    isDragging = true;
 })
.mouseup(function() {
    var wasDragging = isDragging;
    isDragging = false;
    if (!wasDragging) {
        $("#throbble").toggle();
    }
});

这是一个演示:http://jsfiddle.net/W7tvD/1399/

Answer 2

出于某种原因,上述解决方案对我不起作用.我选择了以下内容:

$('#container').on('mousedown', function(e) {
    $(this).data('p0', { x: e.pageX, y: e.pageY });
}).on('mouseup', function(e) {
    var p0 = $(this).data('p0'),
        p1 = { x: e.pageX, y: e.pageY },
        d = Math.sqrt(Math.pow(p1.x - p0.x, 2) + Math.pow(p1.y - p0.y, 2));

    if (d < 4) {
        alert('clicked');
    }
})

您可以根据需要调整距离限制,甚至可以将其调整为零.

Answer 3

使用jQuery UI就可以了!

$( "#draggable" ).draggable({
  start: function() {

  },
  drag: function() {

  },
  stop: function() {

  }
});

Answer 4

$(".draggable")
.mousedown(function(e){
    $(this).on("mousemove",function(e){
        var p1 = { x: e.pageX, y: e.pageY };
        var p0 = $(this).data("p0") || p1;
        console.log("dragging from x:" + p0.x + " y:" + p0.y + "to x:" + p1.x + " y:" + p1.y);
        $(this).data("p0", p1);
    });
})
.mouseup(function(){
    $(this).off("mousemove");
});

此解决方案使用“ on”和“ off”功能来绑定取消绑定的mousemove事件（不建议使用bind和unbind）。您还可以检测到两次mousemove事件之间鼠标x和y位置的变化。