У меня есть throbber, который должен появиться, когда пользователь нажимает на ссылку.
Проблема в том, что эту же ссылку можно щелкнуть и перетащить, чтобы ее переставить. В этом случае мне не понадобится появляться пульсация. Он должен появиться только в том случае, если он действительно ждет куда-то.
Как я могу с помощью jQuery создать прослушиватель событий, который мог бы только разрешить появление throbber, если его щелчок по ссылке, а не щелчок и перетаскивание?
В mousedown, начните устанавливать состояние, если событие mousemove активировано, запишите его, наконец, на мышку, проверьте, перемещена ли мышь. Если он движется, мы перетаскиваем. Если мы не переместились, нажмите на него.
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/
По какой-то причине вышеупомянутые решения не работали для меня. Я пошел со следующим:
$('#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');
}
})
Вы можете настроить ограничение расстояния до того, что захотите, или даже довести его до нуля.
С jQuery UI просто сделайте это!
$( "#draggable" ).draggable({
start: function() {
},
drag: function() {
},
stop: function() {
}
});
$(".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" для привязки события unbind mousemove (привязка и unbind устарели). Вы также можете обнаружить изменение в координатах x и y мыши между двумя событиями mousemove.
Попробуйте это: он показывает, когда состояние перетаскивается.;) ссылка на скрипку
$(function() {
var isDragging = false;
$("#status").html("status:");
$("a")
.mousedown(function() {
$("#status").html("status: DRAGGED");
})
.mouseup(function() {
$("#status").html("status: dropped");
});
$("ul").sortable();
});
Для этого самым простым способом является сенсорный старт, коснитесь перемещения и коснитесь конца. Это работает как на ПК, так и на сенсорном устройстве, просто проверьте его в документации jquery и надейтесь, что это лучшее решение для вас. удачи
Плагин 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);
});
});
};
При использовании:
element.singleclick(function(event) {
alert('Single/simple click!');
});
^^
Убедитесь, что атрибут перетаскиваемый атрибут перетаскивается false, поэтому у вас нет побочных эффектов при прослушивании событий mouseup:
<div class="thing" draggable="false">text</div>
Затем вы можете использовать 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;
});
});
Я отклонился от принятого ответа, чтобы запускаться только тогда, когда щелчок удерживается и перетаскивается.
Моя функция работала, когда я не держал мышь. Вот обновленный код, если вы также хотите эту функциональность:
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);
}
}
);
Вам нужно установить таймер. Когда таймер отключится, запустите throbber и зарегистрируйте клик. Когда происходит перетаскивание, очистите таймер так, чтобы он никогда не заканчивался.
Если вы используете jQueryUI - есть событие onDrag. Если вы этого не сделаете, присоедините своего слушателя к mouseup(), а не нажмите().
// 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");
});
Вам не нужно настраивать переменную, вы можете просто установить, движется ли она в атрибуте datap >
$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
}
});
Мне нужна была функция, которая всегда отслеживала положение мыши и выявляла перетаскивание left-, right-, top-, bottom-. Он также не срабатывает при нажатии, но требует перемещения минимум на 15 пикселей
/**
* 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 + 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 || 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 + ' ' + dragDirectionY);
}
});
});
// Reset some variables again on mouseup
$(document).on("mouseup", function() {
$(document).off("mousemove");
myDragging = false;
dragDirectionX = false;
dragDirectionY = false;
});