I need to simulate a dragging effect, basically when an user click and kept hold the mouse on a DIV, it should be re-positioned accordingly to mouse coordinates (following the mouse).
This script works fine:
http://jsbin.com/vurumupoqu/1/
Except when a user click and hold very near the edge of the DIV and move FAST and far away the mouse outside the DIV, in this case is not being dragged at all.
I have tried several option with mouseleave and mouseout with not success.
I need the DIV being dragged even if the user move fast the mouse when key is hold anywhere on the page.
I would like to know:
How to fix this issue? (I meanly target latest Chrome and Firefix).
Could be a better option using HTML5 drag? If yes why?
Bind the mousemove event handler to document instead of the element itself:
document.addEventListener('mousemove', function (event) {
console.log('+ mousemove')
this.logicDrag();
}.bind(this));
http://jsbin.com/deyiwaqeqa/2/
Explanation
A mousemove event is not triggered for every pixel when you move the mouse around. This means that the mouse might have left #target - before #target has been moved to match the new mouse position.
Related
The scroll event does not capture the mouse "scroll" action, but rather captures the page scroll action.
This means that on pages too small to actually scroll, it's not possible to detect the user's scroll action (e.g. to translate it into a zoom action).
To see what I mean, compare the following two:
https://jsfiddle.net/r8aykcut/1/
https://jsfiddle.net/r8aykcut/2/
Is there a way to listen for the mouse scroll event without the page itself scrolling?
i think you can use wheel event.
The wheel event is fired when a wheel button of a pointing device (usually a mouse) is rotated.
this is the reference link:
wheel event
you can use this listener
addEventListener("wheel", anyFunctionYouWant );
you must set this Listener in your which element , you want to zoom
for example if you have some thing like this
<div class="wraper">
<div>
<div id="ele" ></div>
</div>
</div>
set this Listener for .wraper , this is because i think you want some thing like zooming in google map , if you want this , you have function , and your function trigger if user scroll on your Map ( for zoom in/out ) , and cursor must set on your that element , have Listener
You have added scroll listener. It will listen when page is scroll. You have to use wheel listener.
document.addEventListener("wheel", detect);
function detect (e) {
console.log(e)
};
Above code will work for you.
In my webpage, testing on Chrome, I have a button div. The button is styled so that it has a hover state in a different colour, and a hand-shaped mouse pointer. All this is fine.
When the button is pressed, it triggers an animation, and I don't want to let the user press the button again until it's done, so I put a semi-opaque div over the top to block the button.
The problem comes when the animation completes and the div is removed. The mouse pointer is over the button but the hover state isn't active until the user actually moves the mouse, then the mouse pointer changes and all is well.
Note that the click still works - this is a purely cosmetic (but annoying) aberration.
Can I force the browser to re-evaluate the point under the cursor?
The correct way to prevent input to a button is to disable it. You can toggle the cursor style with the CSS cursor property.
Javascript:
var theButton = document.getElementById('theButton');
theButton.disabled = true;
theButton.setAttribute('style','cursor:default;');
// animation is complete
theButton.disabled = false;
theButton.removeAttribute('style');
jQuery:
var $theButton = $('#theButton').prop('disabled',true).css('cursor','default');
// animation is complete
$theButton.prop('disabled',false).css('cursor','pointer');
Check the position of the mouse when the animation ends and you remove the div, or just always store them and check that value when it ends to see if the cursor is still over your button. You could do this with event.clientX, event.clientY or event.pageX, event.pageY something similar to those(not completely sure just did some quick research but those seemed to work in chrome,IE, and firefox). Then if the mouse is still over the button, trigger the on.hover for the button element again.
Try to set the curser of all elements using the * wildcard in jquery. See if this will update the cursor.
It seems like the root of your question was to how to prevent double animating. Instead of placing a <div> over it, you can just do it with JavaScript.
Set a global variable called isAnimating to true when you start your animation. At the top of your click handler add this line if (isAnimating) return false; Obviously, you need to set isAnimating to false as soon as the animation is completed, either through a timer or in some kind of callback function.
This will prevent double animating, without doing anything silly with the DOM that would affect the hover states, or so I'd hope!
Let me know if that's not what you meant and I'll take another look at it!
I've created a custom drag event, but unfortunately when I am dragging my div around all of the text on the page is being selected where I drag. I've tried this so far:
$(document).mousemove(function(event) {
event.preventDefault();
});
This isn't doing it. Any thoughts?
The drag starts with the mousedown event.
$(document).mousedown(function(e){e.preventDefault();});
In have two div in the page,the outer and the inner.
I bind the mousemove event to the outer div,when user mousemove in the outer div,it will show the clientX and clientY of the mouse.
Also I make the inner div dragable,here is the live example.
1) I do not want the outer's mousemove event trigger when I drag the inner div.
Of course I can set the "outer.onmousemove=null" when I drag the inner div,but I do not think it is the best way since the event on the outer div maybe binded by other people.
I try to use the event.cancalBubble,but it seems that it does not work.
2) when I drag the inner div,it will select the text in the firefox,how to stop it?
There are two functions that can be called to make sure that the event bubble stops:
event.stopPropagation();
event.preventDefault();
If you make sure to call both of those then it should prevent both the parent div being selected and the text being selected.
Edit:
Looking more closely at your code I see a few problems. The first thing is that you use the onmousemove event for registering the mouse coordinates in the "outer" div. Then you use the documents onmousemove to drag to "inner" div around. That means that if you stop the propagation for the onmousemove event when you start dragging, it will never bubble up to the document node and in turn will result in the draggable div never being dragged untill you actually move the mouse outside the "inner" div area.
One solution is to set the _mouseMove function on the moveable div instead of the document and then stop the propagation like this:
/* Remove this */
//document.onmousemove=_mouseMove;
//document.onmouseup=_mouseUp;
/* Add this */
move_ele.onmousemove=_mouseMove;
move_ele.onmouseup=_mouseUp;
e.stopPropagation();
e.preventDefault();
This will make it work like you mention except when you drag so fast that the cursor leaves the "inner" div area, then it will stop dragging untill the cursor enters the div area again.
Another solution is to handle it all in the "outer" divs onmousemove event to see if the mouse is actually moving over that div and not the "inner" like this:
out.onmousemove=function(e){
/* Check to see if the target is the "outer" div */
if(e.target == this){
e=e==null?window.event:e;
note.innerHTML=e.clientX+','+e.clientY;
}
}
This will also work like you mention but it will also stop the coordinates from being updated as soon as you move the cursor over the inner div even though you have not started dragging.
I want to resize an image in RaphaelJS following this example: ... . You can see there that you can move the mouse as fast as you want, and the resize is pretty smooth.
In my example: ... , even if I use the same technique, the resize is not that smooth and sometimes it stops. What am I doing wrong?
It seems that you don't need to set cursor type to 'move' or 'se-resize' on mousemove. Try to put that on mousedown event only. You always changing the type of your movement
So if you press mouse button to resize, it is still posible to change cursor type to 'move' when you move your mouse fast.