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.
Related
So, I'm creating this webpage with a counter-intuitive way of navigating. What I'm hoping to achieve is to have to cursor move in the opposite direction of your mouse movement input.
What I did is hide the cursor altogether and let an element move in the opposite direction of mouse movement using JavaScript and CSS. The problem with this is I cannot get the new element to perform tasks like mouse enter and mouse hover. Any ideas or suggestions as to what I could do with this?
You'll have to get creative here. You could, for instance, add a handler to the window for onclick, onmousemove, etc..Inside that handler, use document.elementFromPoint(x, y) to get an element at a position and then explicitly fire events on that.
If you have overlapping elements (and want to trigger multiple events), you'll have to keep track internally of all elements that are 'interactable'. Perhaps by attaching a specific class or tag to them and then getting a list with a selector.
How can activate the drag -and-drop feature inside the canvas tag ?
As far as I know, there is no built-in drag and drop within a canvas, because a canvas is a literal context that you draw things on. Canvas-based games constantly refresh and redraw all elements.
Basically, a canvas requires a lot of manual, fine-tuned assembly of colors, though it can be performant under circumstances where you want that type of manual, decided control
When a user clicks on an object that seems to be within your canvas, you have to calculate where that mouse event's X and Y coordinates would fall, and determine which actions can be performed onclick on whichever thing is drawn there.
Normal DOM (not so in a canvas or iframe) will emit an event from the element you clicked, and will bubble up through all parent elements saying that some target element was clicked, and this fired event will have lots of data about that click event
A canvas is kinda like having a real painting: rather than an assembly of objects, there is nothing to drag, just a bunch of data about which pixels are which colors.
Normally, HTML elements have an attribute [draggable], but you would still need to manually reposition the element on mouseup or whatever, based off of the screen, or closest non-staticly placed parent. This question might be helpful: HTML5 Canvas Drag and Drop Item
You should search around instead of asking a question like this, in my opinion
I am implementing a scrollbar using jQuery/Javascript/CSS. The usual. Everything is going according to plan except for the following use case:
The user mouses down in the scrollbar div hosting mousedown/mousemove/mouseup event handlers. The user initiates a drag gesture - mousemove starts firing - that soon moves the cursor outside the bounds of the scrollbar div and onto the surrounding div real estate on the web page. The moment this happens, mousemove - as expected - stops firing events.
How do I continue to have mousemove fire events without resorting to just attaching a mousemove handler to the root div? How do I maintain scrollbar dragger translation even though the cursor has wandered off the scrollbar?
Thanks,
Doug
Instead of using onmousemove on the element, use it on the document.
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
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/