I have a chessboard like UI, wherein when I drag across check squares I need to EaselJS to detect my shapes(different squares) .I have hooked up those shapes with onMouseMove event handler. However I see that which ever shape gets clicked on mouse down that same shapes keeps emitting the onmousemove event even though I have moved outside the surface area of that shape and onto another shape. How can I have events that listen when I move out of the shape and into another shape using drag/touch or mouse drag?
The mousemove events come from the shape you clicked on, so the target will always be that initial clicked shape.
To determine what is currently under the mouse, use the getObjectUnderPoint or getObjectsUnderPoint APIs.
http://www.createjs.com/Docs/EaselJS/classes/Container.html#method_getObjectsUnderPoint
Related
I have a shape that has hoverIn() and hoverOut() function and it can be dragged at the same time. My problem is when I drag too fast (not like really really fast), the mouse pointer may go outside of the shape boundary before the shape is actually moved. This cause hoverOut to be fired and it messes up with my dragging function. When I drag slow, this doesn't happened since the shape displacement is small and the mouse is always inside.
How can I handle the fact that if I'm dragging I don't want to deal with hoverOut. I tried the unHoverfunction(), it partially worked but now after dragging and leaving the shape the hoverOut function is not fired as it should be.
I've just created a flag, it seems like no built-in solution exist. Thanks for your time.
I am trying to get the mouse over function working in my pure Javascript (no jQuery, HTML or CSS). At the moment I have created just a small circle and when I mouse over it I want it to change colors.
instance.threadContext is just the part of the canvas where the circle is being drawn.
Any help would be much appreciated.
What you need to understand is that when you draw something onto a canvas, it does not become a ui element, but is actually a part of the overall image of the canvas. The reason you can't invoke a mouse-over event on the circle is because the circle isn't a thing that can receive events, it's just a drawing of a circle on an element which itself can receive events.
One way that you can get around this is to measure the mouse position on move and redraw the circle in an over state when the position is within the area for which you want the event to be triggered.
I implemented drag and drop here. Try clicking on the ball and dragging it around.
http://joelin.org/p/mouse2.html
However, I used the html element as the one that catches mouse events. If I use the ball element to catch events instead, my mouse pointer quickly leaves the ball behind if the mouse pointer moves too fast.
I would like the listener to be attached to the ball so I can attach listeners to multiple balls. Is this possible? Thanks,
Have you tried jQuery Draggable? http://jqueryui.com/draggable/
I'm trying to draw rectangles with the mouse using the Raphael 2+ library (note: the answer to this question won't work with Raphael 2).
With rectangles (Paper.rect), the mousedown/mouseup events only trigger when the cursor is on the edge of the rectangle and not within it. Is there a way to attach these events so they trigger when the mouse cursor is within the rectangle?
Ultimately, I'm trying to draw marquees/frames with the mouse. Ideally, I'd like to attach mouse listeners to the paper, but this is no longer possible, so I'm creating a 'surface' rect on the paper and drawing my elements within it. Is this approach whack? Any ideas most welcome.
I've played around, and it seems that you have to fill your shape in order to have your events fired. See here : http://jsfiddle.net/bathz/KrpKs/
That just makes sens to me, It enables you to sharply define the perimeter of what you listen to. I guess you could fill the shape with a transparent color, but I'll leave it to you.
I am writing a JavaScript library for a school project that will allow you to implement drag and drop. I have implemented dragging. When the user drags a draggable object, I create a partially transparent clone of the object that follows their mouse pointer until they lift up on the mouse (onmouseup). When they are dragging over a droppable object, I want there to be a visual to show the user that they can drop their object there.
jQuery UI has accomplished this:
http://jqueryui.com/demos/droppable/#visual-feedback
I can not get this to work because my onmouseover event is not being fired because my clone element is in the way. My clone always follows the mouse pointer. How can I get the event to fire to the element under the clone?
onMouseDown/Up are defined on the elements you are dragging. Elements beneath the dragged object will not be able to catch onMouseOver event. Why? Because you are dragging object and that object only can catch the onMouseOver event.
So, to detect destination, maybe you should create a script that calculates the coordinates of the droppable object and store them. Then search if the mouse coordinates are inside the droppableObjectCoordinates and after left mouse button is released, drop what you dragged to the correct position.
Use a mousemove event on the body that checks the mouse coordinates against the object clientX and clientY.