blocks|key|294766|text|在mousedown时，start设置状态，如果mousemove事件被激发，则记录它，最后在mouseup时，检查鼠标是否移动。如果它动了，我们就一直在拖拽。如果我们还没有移动，那就是点击。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|294767|var+isDragging+=+false;
$("a")
.mousedown(function()+{
++++isDragging+=+false;
})
.mousemove(function()+{
++++isDragging+=+true;
+})
.mouseup(function()+{
++++var+wasDragging+=+isDragging;
++++isDragging+=+false;
++++if+(!wasDragging)+{
++++++++$("#throbble").toggle();
++++}
});|code-block|syntax|javascript|294768|这是一个演示：http://jsfiddle.net/W7tvD/1399/|offset|length|294769|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/W7tvD/1399/^0|0|0|7|V|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

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.

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

Here's a demo: <a href="http://jsfiddle.net/W7tvD/1399/" rel="noreferrer">http://jsfiddle.net/W7tvD/1399/</a>

blocks|key|291838|text|由于某些原因，上面的解决方案对我不起作用。我采用了以下方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|291839|$('#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)+%2B+Math.pow(p1.y+-+p0.y,+2));

++++if+(d+<+4)+{
++++++++alert('clicked');
++++}
})|code-block|syntax|javascript|291840|您可以将距离限制调整为任何您喜欢的值，甚至可以一直将其设置为零。|291841|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

For some reason, the above solutions were not working for me. I went with the following:

<pre><code>$('#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 &lt; 4) {
 alert('clicked');
 }
})
</code></pre>

You can tweak the distance limit to whatever you please, or even take it all the way to zero.

blocks|key|294829|text|使用jQuery+UI就可以做到这一点！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|294830|$(+"#draggable"+).draggable({
++start:+function()+{

++},
++drag:+function()+{

++},
++stop:+function()+{

++}
});|code-block|syntax|javascript|294831|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

With jQuery UI just do this!

<pre><code>$( "#draggable" ).draggable({
 start: function() {

 },
 drag: function() {

 },
 stop: function() {

 }
});
</code></pre>

blocks|key|292644|text|$(".draggable")
.mousedown(function(e){
++++$(this).on("mousemove",function(e){
++++++++var+p1+=+{+x:+e.pageX,+y:+e.pageY+};
++++++++var+p0+=+$(this).data("p0")+%7C%7C+p1;
++++++++console.log("dragging+from+x:"+%2B+p0.x+%2B+"+y:"+%2B+p0.y+%2B+"to+x:"+%2B+p1.x+%2B+"+y:"+%2B+p1.y);
++++++++$(this).data("p0",+p1);
++++});
})
.mouseup(function(){
++++$(this).off("mousemove");
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|292645|此解决方案使用"on“和"off”函数来绑定unbind一个mousemove事件(不推荐使用bind和unbind+)。您还可以检测两个鼠标移动事件之间鼠标x和y位置的变化。|unstyled|292646|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$(".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");
});
</code></pre>

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.

blocks|key|291860|text|试试这个:它会显示“拖拽”状态。;)+fiddle+link|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|291861|$(function()+{
++++var+isDragging+=+false;
++++$("#status").html("status:");
++++$("a")
++++.mousedown(function()+{
++++++++$("#status").html("status:+DRAGGED");++++++++
++++})
++++.mouseup(function()+{
++++++++$("#status").html("status:+dropped");+++
++++});

++++$("ul").sortable();
});|code-block|syntax|javascript|291862|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/W7tvD/729/^0|J|B|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Try this: it shows when is 'dragged' state. ;) 
<a href="http://jsfiddle.net/W7tvD/729/" rel="nofollow">fiddle link</a>

<pre><code>$(function() {
 var isDragging = false;
 $("#status").html("status:");
 $("a")
 .mousedown(function() {
 $("#status").html("status: DRAGGED"); 
 })
 .mouseup(function() {
 $("#status").html("status: dropped"); 
 });

 $("ul").sortable();
});
</code></pre>

blocks|key|294800|text|//+here+is+how+you+can+detect+dragging+in+all+four+directions
var+isDragging+=+false;
$("some+DOM+element").mousedown(function(e)+{
++++var+previous_x_position+=+e.pageX;
++++var+previous_y_position+=+e.pageY;

++++$(window).mousemove(function(event)+{
++++++++isDragging+=+true;
++++++++var+x_position+=+event.pageX;
++++++++var+y_position+=+event.pageY;

++++++++if+(previous_x_position+<+x_position)+{
++++++++++++alert('moving+right');
++++++++}+else+{
++++++++++++alert('moving+left');
++++++++}
++++++++if+(previous_y_position+<+y_position)+{
++++++++++++alert('moving+down');
++++++++}+else+{
++++++++++++alert('moving+up');
++++++++}
++++++++$(window).unbind("mousemove");
++++});
}).mouseup(function()+{
++++var+wasDragging+=+isDragging;
++++isDragging+=+false;
++++$(window).unbind("mousemove");
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|294801|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>// here is how you can detect dragging in all four directions
var isDragging = false;
$("some DOM element").mousedown(function(e) {
 var previous_x_position = e.pageX;
 var previous_y_position = e.pageY;

 $(window).mousemove(function(event) {
 isDragging = true;
 var x_position = event.pageX;
 var y_position = event.pageY;

 if (previous_x_position &lt; x_position) {
 alert('moving right');
 } else {
 alert('moving left');
 }
 if (previous_y_position &lt; y_position) {
 alert('moving down');
 } else {
 alert('moving up');
 }
 $(window).unbind("mousemove");
 });
}).mouseup(function() {
 var wasDragging = isDragging;
 isDragging = false;
 $(window).unbind("mousemove");
});
</code></pre>

blocks|key|3012661|text|确保将元素的draggable属性设置为false，这样在侦听mouseup事件时就不会有副作用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3012662|<div+class="thing"+draggable="false">text</div>|code-block|syntax|javascript|3012663|然后，您可以使用jQuery：|3012664|$(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+%7C%7C
++++++++++++++Math.abs(e.pageY+-+pressY)+>+offset;
++})
++.on('mouseup',+function()+{
++++dragged+&&+console.log('Thing+dragged');
++++pressed+=+dragged+=+false;
++});
});|3012665|entityMap^0|6|9|K|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

Make sure you set the element's draggable attribute to false so you don't have side effects when listening to mouseup events:

<pre><code>&lt;div class="thing" draggable="false"&gt;text&lt;/div&gt;
</code></pre>

Then, you can use jQuery:

<pre><code>$(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) &gt; offset ||
 Math.abs(e.pageY - pressY) &gt; offset;
 })
 .on('mouseup', function() {
 dragged &amp;&amp; console.log('Thing dragged');
 pressed = dragged = false;
 });
});
</code></pre>

blocks|key|291930|text|我从被接受的答案分支到只在点击被按住并拖动时运行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|291931|我的函数是在我没有按住鼠标的时候运行的。如果您还需要此功能，以下是更新后的代码：|291932|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);
++++++++}

++++}
);|code-block|syntax|javascript|291933|entityMap^0|B|A|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

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:

<pre><code>var isDragging = false;
var mouseDown = false;

$('.test_area')
 .mousedown(function() {
 isDragging = false;
 mouseDown = true;
 })
 .mousemove(function(e) {
 isDragging = true;

 if (isDragging === true &amp;&amp; mouseDown === true) {
 my_special_function(e);
 }
 })
 .mouseup(function(e) {

 var wasDragging = isDragging;

 isDragging = false;
 mouseDown = false;

 if ( ! wasDragging ) {
 my_special_function(e);
 }

 }
);
</code></pre>

blocks|key|3012567|text|对于这个最简单的方式是触摸开始，触摸移动和触摸结束。这既适用于PC也适用于触控设备，请在jquery文档中查看，希望这是最适合您的解决方案。祝好运|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3012568|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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

blocks|key|3012588|text|基于Simen+Echholt答案的jQuery插件。我称之为“单击”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3012589|/**
+*+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);
++++++++});
++++});
};|code-block|syntax|javascript|3012590|使用中：|3012591|element.singleclick(function(event)+{
++++alert('Single/simple+click!');
});|3012592|%5E%5E|3012593|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

jQuery plugin based on Simen Echholt's answer. I called it single click.

<pre><code>/**
 * 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);
 });
 });
};
</code></pre>

In use:

<pre><code>element.singleclick(function(event) {
 alert('Single/simple click!');
});
</code></pre>

^^

blocks|key|292548|text|你需要设置一个计时器。当计时器超时时，启动脉搏并注册点击。当发生拖动时，清除计时器，使其永远不会完成。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|292549|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|3012511|text|如果你使用的是jQueryUI+-有一个onDrag事件。如果没有，则将侦听器附加到mouseup()，而不是单击()。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3012512|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If you're using jQueryUI - there is an onDrag event. If you're not, then attach your listener to mouseup(), not click().

blocks|key|3012648|text|你不必设置变量，只需设置它是否在data-attribute中移动即可|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3012649|$youtubeSlider.find('a')
++++.on('mousedown',+function+(e)+{
++++++++$(this).data('moving',+false);
++++})
++++.on('mousemove',+function+(e)+{
++++++++$(this).data('moving',+true);
++++})
++++.on('mouseup',+function+(e)+{
++++++++if+(!$(this).data('moving'))+{
++++++++++++//+Open+link
++++++++}
++++});|code-block|syntax|javascript|3012650|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You don`t have to setup variable, you can just set if it is moving in data-attribute

<pre><code>$youtubeSlider.find('a')
 .on('mousedown', function (e) {
 $(this).data('moving', false);
 })
 .on('mousemove', function (e) {
 $(this).data('moving', true);
 })
 .on('mouseup', function (e) {
 if (!$(this).data('moving')) {
 // Open link
 }
 });
</code></pre>

blocks|key|3012677|text|我需要一个始终跟踪鼠标位置并检测向左、向右、向上、向下拖动的函数。它也不会在点击时触发，但需要至少15px的移动|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3012678|/**
+*+Check+for+drag+when+moved+minimum+15px
+*+Same+time+keep+track+of+mouse+position+while+dragging
+*/
//+Variables+to+be+accessed+outside+in+other+functions
var+dragMouseX;
var+dragMouseY;
var+myDragging+=+false;+//+true+or+false
var+dragDirectionX+=+false;+//+left+or+right
var+dragDirectionY+=+false;+//+top+or+bottom

$(document).on("mousedown",+function(e)+{
++++//+Reset+some+variables+on+mousedown
++++var+lastDirectionCheck+=+e.timeStamp;
++++var+dragStartX+=+e.pageX;
++++var+dragStartY+=+e.pageY;
++++dragMouseX+=+e.pageX;
++++dragMouseY+=+e.pageY;
++++myDragging+=+false;
++++dragDirectionX+=+false;
++++dragDirectionY+=+false;

++++//+On+the+move
++++$(document).on("mousemove",+function(e)+{
++++++++dragMouseX+=+e.pageX;
++++++++dragMouseY+=+e.pageY;

++++++++//+Recalculate+drag+direction+every+200ms+in+case+user+changes+his+mind
++++++++if+(e.timeStamp+>+(lastDirectionCheck+%2B+200))+{
++++++++++++dragStartX+=+dragMouseX;
++++++++++++dragStartY+=+dragMouseY;
++++++++++++lastDirectionCheck+=+e.timeStamp;
++++++++}

++++++++//+Check+for+drag+when+moved+minimum+15px+in+any+direction
++++++++if+(!myDragging+&&+Math.abs(dragStartX+-+dragMouseX)+>+15+%7C%7C+Math.abs(dragStartY+-+dragMouseY)+>+15)+{
++++++++++++myDragging+=+true;
++++++++}
++++++++if+(myDragging)+{
++++++++++++//+Check+drag+direction+X
++++++++++++if+(dragStartX+>+dragMouseX)+dragDirectionX+=+'left';
++++++++++++if+(dragStartX+<+dragMouseX)+dragDirectionX+=+'right';

++++++++++++//+Check+drag+direction+Y
++++++++++++if+(dragStartY+>+dragMouseY)+dragDirectionY+=+'top';
++++++++++++if+(dragStartY+<+dragMouseY)+dragDirectionY+=+'bottom';

++++++++++++//+console.log(dragDirectionX+%2B+'+'+%2B+dragDirectionY);
++++++++}
++++});
});

//+Reset+some+variables+again+on+mouseup
$(document).on("mouseup",+function()+{
++++$(document).off("mousemove");
++++myDragging+=+false;
++++dragDirectionX+=+false;
++++dragDirectionY+=+false;
});|code-block|syntax|javascript|3012679|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I needed a function that always keeps track of mouse position and detect left-, right-, top-, bottom- dragging. It also does not trigger on click but needs a minimum of 15px move

<pre><code>/**
 * Check for drag when moved minimum 15px
 * Same time keep track of mouse position while dragging
 */
// Variables to be accessed outside in other functions
var dragMouseX;
var dragMouseY;
var myDragging = false; // true or false
var dragDirectionX = false; // left or right
var dragDirectionY = false; // top or bottom

$(document).on("mousedown", function(e) {
 // Reset some variables on mousedown
 var lastDirectionCheck = e.timeStamp;
 var dragStartX = e.pageX;
 var dragStartY = e.pageY;
 dragMouseX = e.pageX;
 dragMouseY = e.pageY;
 myDragging = false;
 dragDirectionX = false;
 dragDirectionY = false;

 // On the move
 $(document).on("mousemove", function(e) {
 dragMouseX = e.pageX;
 dragMouseY = e.pageY;

 // Recalculate drag direction every 200ms in case user changes his mind
 if (e.timeStamp &gt; (lastDirectionCheck + 200)) {
 dragStartX = dragMouseX;
 dragStartY = dragMouseY;
 lastDirectionCheck = e.timeStamp;
 }

 // Check for drag when moved minimum 15px in any direction
 if (!myDragging &amp;&amp; Math.abs(dragStartX - dragMouseX) &gt; 15 || Math.abs(dragStartY - dragMouseY) &gt; 15) {
 myDragging = true;
 }
 if (myDragging) {
 // Check drag direction X
 if (dragStartX &gt; dragMouseX) dragDirectionX = 'left';
 if (dragStartX &lt; dragMouseX) dragDirectionX = 'right';

 // Check drag direction Y
 if (dragStartY &gt; dragMouseY) dragDirectionY = 'top';
 if (dragStartY &lt; dragMouseY) dragDirectionY = 'bottom';

 // console.log(dragDirectionX + ' ' + dragDirectionY);
 }
 });
});

// Reset some variables again on mouseup
$(document).on("mouseup", function() {
 $(document).off("mousemove");
 myDragging = false;
 dragDirectionX = false;
 dragDirectionY = false;
});
</code></pre>

I have a throbber that is to appear when a user clicks a link.

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?

Can you detect "dragging" in jQuery?

当用户点击一个链接时，我有一个要出现的跳动。问题是，可以单击和拖动相同的链接来重新排列。在这种情况下，我不需要出现脉搏。只有当它真的在等待去某个地方时，它才需要出现。使用jQuery，我如何创建一个事件侦听器，如果它是指向链接的单击，而不是单击并拖动，那么它只允许跳动出现？

问你能在jQuery中检测到“拖拽”吗？
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问你能在jQuery中检测到“拖拽”吗？EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问你能在jQuery中检测到“拖拽”吗？
EN