你能检测到 jQuery 中的“拖动”吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4127118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you detect "dragging" in jQuery?
提问by Trip
I have a throbber that is to appear when a user clicks a link.
我有一个 throbber，当用户单击链接时会出现。
The problem is is that that same link can be clicked and dragged to be rearranged. In this case, I wouldn't need the throbber to appear. It only needs to appear if its actually waiting to go somewhere.
问题是可以单击并拖动相同的链接以重新排列。在这种情况下，我不需要跳动者出现。它只需要在它实际上等待去某个地方时出现。
How can I, with jQuery, create an event listener that would only allow a throbber to appear if its a click through to a link, and not a click and drag?
我如何使用 jQuery 创建一个事件侦听器，该侦听器仅在单击到链接而不是单击并拖动时才允许出现跳动者？
回答by Simen Echholt
On mousedown, start set the state, if the mousemove event is fired record it, finally on mouseup, check if the mouse moved. If it moved, we've been dragging. If we've not moved, it's a click.
在 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();
}
});
Here's a demo: http://jsfiddle.net/W7tvD/1399/
这是一个演示：http: //jsfiddle.net/W7tvD/1399/
回答by anewcomer
For some reason, the above solutions were not working for me. I went with the following:
出于某种原因，上述解决方案对我不起作用。我采用了以下方法：
$('#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');
}
})
You can tweak the distance limit to whatever you please, or even take it all the way to zero.
您可以根据自己的喜好调整距离限制，甚至可以将其一直设置为零。
回答by GaidenFocus
With jQuery UI just do this!
使用 jQuery UI 就可以了！
$( "#draggable" ).draggable({
start: function() {
},
drag: function() {
},
stop: function() {
}
});
回答by jnaklaas
$(".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");
});
This solution uses the "on" and "off" functions to bind an unbind a mousemove event (bind and unbind are deprecated). You can also detect the change in mouse x and y positions between two mousemove events.
此解决方案使用“on”和“off”函数来绑定取消绑定 mousemove 事件（不推荐使用绑定和取消绑定）。您还可以检测两个 mousemove 事件之间鼠标 x 和 y 位置的变化。
回答by syC
Try this: it shows when is 'dragged' state. ;) fiddle link
试试这个：它显示什么时候是“拖动”状态。;) 小提琴链接
$(function() {
var isDragging = false;
$("#status").html("status:");
$("a")
.mousedown(function() {
$("#status").html("status: DRAGGED");
})
.mouseup(function() {
$("#status").html("status: dropped");
});
$("ul").sortable();
});
回答by Hyman
I branched off from the accepted answer to only run when the click is being HELD down and dragged.
我从接受的答案分支到仅在单击被按住并拖动时运行。
My function was running when I wasn't holding the mouse down. Here's the updated code if you also want this functionality:
当我没有按住鼠标时，我的功能正在运行。如果您还需要此功能，这里是更新后的代码：
var isDragging = false;
var mouseDown = false;
$('.test_area')
.mousedown(function() {
isDragging = false;
mouseDown = true;
})
.mousemove(function(e) {
isDragging = true;
if (isDragging === true && mouseDown === true) {
my_special_function(e);
}
})
.mouseup(function(e) {
var wasDragging = isDragging;
isDragging = false;
mouseDown = false;
if ( ! wasDragging ) {
my_special_function(e);
}
}
);
回答by Marcelo Kanzaki
Make sure you set the element's draggableattribute to falseso you don't have side effects when listening to mouseup events:
确保将元素的draggable属性设置为false，这样在侦听mouseup 事件时就不会产生副作用：
<div class="thing" draggable="false">text</div>
Then, you can use jQuery:
然后，您可以使用 jQuery：
$(function() {
var pressed, pressX, pressY,
dragged,
offset = 3; // helps detect when the user really meant to drag
$(document)
.on('mousedown', '.thing', function(e) {
pressX = e.pageX;
pressY = e.pageY;
pressed = true;
})
.on('mousemove', '.thing', function(e) {
if (!pressed) return;
dragged = Math.abs(e.pageX - pressX) > offset ||
Math.abs(e.pageY - pressY) > offset;
})
.on('mouseup', function() {
dragged && console.log('Thing dragged');
pressed = dragged = false;
});
});
回答by ipfaffen
jQuery plugin based on Simen Echholt's answer. I called it single click.
基于 Simen Echholt 的回答的 jQuery 插件。我称之为单击。
/**
* jQuery plugin: Configure mouse click that is triggered only when no mouse move was detected in the action.
*
* @param callback
*/
jQuery.fn.singleclick = function(callback) {
return $(this).each(function() {
var singleClickIsDragging = false;
var element = $(this);
// Configure mouse down listener.
element.mousedown(function() {
$(window).mousemove(function() {
singleClickIsDragging = true;
$(window).unbind('mousemove');
});
});
// Configure mouse up listener.
element.mouseup(function(event) {
var wasDragging = singleClickIsDragging;
singleClickIsDragging = false;
$(window).unbind('mousemove');
if(wasDragging) {
return;
}
// Since no mouse move was detected then call callback function.
callback.call(element, event);
});
});
};
In use:
正在使用：
element.singleclick(function(event) {
alert('Single/simple click!');
});
^^
^^
回答by Anup
For this simplest way is touch start, touch move and touch end. That is working for both PC and touch device just check it in jquery documentation and hope this is the best solution for you. good luck
对于这种最简单的方法是触摸开始，触摸移动和触摸结束。这对 PC 和触摸设备都有效，只需在 jquery 文档中查看它，希望这是最适合您的解决方案。祝你好运
回答by Diodeus - James MacFarlane
You've need to set a timer. When the timer times out, start the throbber and register the click. When drag occurs, clear the timer so it never completes.
你需要设置一个计时器。当计时器超时时，启动 throbber 并注册点击。当拖动发生时，清除计时器使其永远不会完成。
