I need an event, that invokes everytime I move my mouse above some HTML element. But I need it to fire off all the time I am moving, not just when I enter some element (like the mouseover, mouseenter or hover event does).
I saw a lot of people were trying to do just opposite functionality few years ago (mouseover element was firing of all the time I was hovering above some div) but everytime I was testing this event, it fired off only when I entered some div. I need it to fire off everytime I move my mouse and I am above watched element so I can determine mouse relative position to that element.
Is there an event I am missing or is there some workaround how to track mouse position within some element based just on hovering(not click, dbclick, ..)?
Add the mouseover event, then bind to the mousemove.
I made you a small example to see the coordinates while you are moving over a div.
$("#mydiv").bind('mousemove', function(event)
{
var offsetleft = this.offsetLeft;
var offsettop = this.offsetTop;
var coordX = event.pageX - offsetleft;
var coordY = event.pageY - offsettop;
$("#coords").html("X: " + coordX + " Y: " + coordY);
});
http://jsfiddle.net/dVqwH/2/
Try to use mousemove: http://api.jquery.com/mousemove/
$( "#target" ).mousemove(function( event ) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
$( "#log" ).append( "<div>" + msg + "</div>" );
});
you can bind to the mousemove jQuery event
$( "html" ).mousemove(function( event ) {
...
});
jsFiddle demo
In the examples I bind to all the document but you can easily bind to the element of interest with jquery selectors
Related
I create a div and then:
$("#div").resizable({
disabled:true
});
Then I enable the resize behaviour and at the same time i want to handle a click on the div:
$("#div").on("click", myHandler);
$("#div").resizable( "option", "disabled", false);
function myHandler() {
console.log("div clicked");
}
If now I drag the bottom-right corner of the div I can resize it, but when I release the drag if the mouse pointer is inside the div (this happens when shrinking it) myHandler() is also called. Since myHandler() is supposed to handle a different behavior - and not the resizing - how can I solve this?
What I've tried so far with no success:
$("#div").resizable({
disabled:true,
stop: function(event) { event.stopPropagation(); }
});
How about only doing the click handler when the mouse position is at the same place as it started?
var left = 0;
var top = 0;
("#div").on({
mousedown: function(e) {
left = e.pageX;
top = e.pageY;
},
mouseup: function(e) {
if (left === e.pageX && top === e.pageY) {
console.log('click');
}
}
});
in the snippet below, only the 'mousemove' event is working. 'mousedown' has no effect and I'm not able to decipher why this is happening. If I replace 'mousedown' with 'click', it does work, however I want to use mousedown so the fadeOut event happens immediately (at the start of a click, rather than using click which relies on the users mouse going down and then back up.
$('.issue-carousel').on({
// On mousemove, controls follow cursor
mousemove: function(e) {
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$('.drag-indicator').css({
left: relX,
top: relY
});
},
mousedown: function() {
$('.drag-indicator').fadeOut(300);
}
});
As per my comment, your code works fine - with one exception. The mousedown fadeout doesn't work because you technically aren't clicking the carousel but instead the drag indicator. I've updated the code as per below where I have changed the mousedown target accordingly;
$('.issue-carousel').on({
// On mousemove, controls follow cursor
mousemove: function(e) {
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$('.drag-indicator').css({
left: relX,
top: relY
});
}
});
$('.drag-indicator').on({
mousedown: function(e){
$(this).fadeOut(300);
}
})
A working fiddle can be found here: https://jsfiddle.net/o3cdLjp7/2/
http://jsfiddle.net/6no66j16/
I am dragging "#draggable" element over to the ".droptarget"
How can I get realtime position of mouse/draggable event relative to droppable element?
The "over" method inside droppable does not update mouse position (like hover position). How can I get realtime hover position relative to droppable?
over: function (event, ui) {
$(this).css("background-color", "red");
$(".droptarget").removeClass("hidden");
$(".droptarget").mousemove(function (event) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
console.log(msg);
});
}
Thanks!
I have to move a div by clicking on it, clicking again I must stop the div in that position. Now the problem is: when I want to move again the div, does not activate the mousemove event ... how can I fix it?
$('.move_div').live('click', function() {
$('html').on('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$('div').css({'top': y, 'left': x});
});
$("html").live('click', function() {
$('html').off('mousemove');
});
});
var ele = '.move_adv';
var moveBool = false;
$(function () {
$('html').on('mousemove', function (e) {
console.log($(this).width());
if (moveBool == true) {
var x = e.pageX - $(ele).width()/2;
var y = e.pageY - $(ele).height()/2;
$(ele).css({
'top': y,
'left': x
});
}
});
});
$(ele).live('click', function () {
moveBool = !moveBool;
});
http://jsfiddle.net/6y24s/2/
The main logic is storing the 'moveability' state of the div in a boolean.
You would also like to refine the code more.
Fiddle here , if you want to keep your code then only thing you need to add is
event.stopPropagation();
When you click on the div the mousemove handler is added to the div. Then an event handler is added to the document that removes any mousemove event handlers.
You then move the mouse and the div follows, you click and the mousemove handler is deleted.
You click on the div again, a mousemove event handler is added, though then the click event handler from the document takes away the mousemove handler.
So whenever you click after the first two clicks the mousemove handler is simultaneously created and destroyed.
Also use .on() instead of .live()
.live() was deprecated in JQuery 1.7
I am working on this project: http://www.arbamedia.com/test/
if you go to Dyer dhe dritare on the left menu and drag one of the elements (the door or the window) into the right side (the desk) in Chrome and FF the 3 options that I have added for that elements show, so this: $("p", this).show(); works, but in IE9 when I drag an element it doesn't show the the options for dragging, rotating or deleting! I dont know what is wrong.
This is where it happens:
$(".drag").draggable({
revert : 'invalid',
helper : 'clone',
containment : 'desk',
cursorAt : { left:-11,top:-1 },
//When first dragged
stop : function(ev, ui) {
/*========================================================================*/
var pos = $(ui.helper).offset();
var left_ = ev.originalEvent.pageX - $("#desk").position().left;
var top_ = ev.originalEvent.pageY - $("#desk").position().top;
// get widht and height of the container div#desk element
var w_ = $("#desk").width();
var h_ = $("#desk").height();
objName = "#clonediv"+counter++;
objNamex = "clonediv"+counter;
$(objName).css({"left":left_,"top":top_});
var gag = 0;
$(objName).click(function () {
$("p", this).show();
$(this).addClass("selektume");
$('.rotate_handle').unbind('click');
$('.rotate_handle').click(function(){
gag += 45;
$('.selektume').rotate(gag+'deg');
});
$('.delete_handle').click(function() {
$('.selektume').remove();
});
return false;
});
$(document).click(function () {
$("p").hide();
$(".lgutipT").removeClass("selektume");
});
//check if dropped inside the conteiner div#des
if((left_ >= 0) && (left_ <= w_) && (top_ >= 0) && (top_ <= h_))
{
$(objName).css({"left":left_,"top":top_});
// assign a z-index value
zindex = left_ + top_;
$(objName).css({"z-index":zindex});
$(objName).addClass("lgutipT");
//$(objName).addClass("ui-widget-content");
$(objName).removeClass("drag");
$(objName).append('<p><img class="handler" src="images/move_button.png"><img class="rotate_handle" src="images/rotate_button.png"><img class="delete_handle" src="images/delete_button.png"></p>');
$("p", this).show();
}
/*========================================================================*/
//When an existiung object is dragged
$(objName).draggable({
containment : "#desk",
handle : ".handler",
cursor : "move"
});
}
});
Very tricky problem since there's no good documentation on how jQuery UI treats events at a core level. The solution was to unbind and rebind the click event. In IE, the click event is treated differently than other browsers. The solution was simply to rebind the click event after everything is done (1/1000 of a second delay).
My solution was to move the click event, add an unbinding on drag start, and to add a setTimeout() on rebinding the $(document).click() event listener when drag was complete.
View the source below to view the working solution.
http://jsfiddle.net/MattLo/AbF6t/
Copy and Paste the HTML to your dev environment.