I have a draggable="true" element which I am dropping into a drop zone. The event gives me back a few properties which I can use to determine it's position and create a new element where it got dropped.
It seems to only give the mouse position. But it doesn't seem to contain the offset of where the image was in relation to the mouse.
Where would I get that information?
A picture to help explain, the mouse is at the yellow dot. The drop event returns event.x and event.y where the mouse is.... But I need to know where the blue dot is, or the offset (red lines)
There are offsetX and offsetY properties in html5 native DragEvent.
For example in React you can get these values through native
function onDragStart(event: React.DragEvent) {
console.log(event.nativeEvent.offsetX)
console.log(event.nativeEvent.offsetY)
}
Related
How does one determine the (x,y) coordinates while dragging "dragover" and after the drop ("drop") in HTML5 DnD?
I found a webpage that describes x,y for dragover (look at e.offsetX and e.layerX to see if set for various browsers but for the life of me they ARE NOT set).
What do you use for the drop(e) function to find out WHERE in the current drop target it was actually dropped?
I'm writing an online circuit design app and my drop target is large.
Do I need to drop down to mouse-level to find out x,y or does HTML5 provided a higher level abstraction?
The properties clientX and clientY should be set (in modern browsers):
function drag_over(event) {
console.log(event.clientX);
console.log(event.clientY);
event.preventDefault();
return false;
}
function drop(event) {
console.log(event.clientX);
console.log(event.clientY);
event.preventDefault();
return false;
}
Here's a (somewhat) practical example that works in Firefox and Chrome.
To build on top of robertc's answer and work around the issue:
The clientX and clientY are going to be inaccurate proportional to the distance of the cursor from the upper left corner of the element which was dropped.
You may simply calculate the delta distance by subtracting the client coords recorded at dragStart from the client coords recorded at dragEnd. Bear in mind the the element which was dropped still has the exact same position at dragEnd which you may update by the delta distance to get the new left and top positional coordinates.
Here's an demo in react, although the same can be accomplished in plain JS.
How do I drag the background image and change its position? Like when you change the position of your cover photo on facebook.
I've searched everywhere but can't find the right one.
On mousedown, log the current mouse position. Create a mask, and on that mask:
On mousemove, get the current mouse position and subtract it from the original mouse position. Move the background accordingly
On mouseup, remove the mask and save the new position.
You can try with this jQuery plugin, and is as easy as:
element.backgroundDraggable()
Here you have a demo
I am setting some elements to my canvas, and using Raphael JS to handle the drag and drop.
What I need to know, is how can I obtain the element that I am dragging's initial x/y positon in relation to the div (that has been set up to be used by Raphael) that its being dragged around in?
I would in jQuery of used offset - what is a simlar function to use in HTML5?
EDIT
Found it - solution is :
element.realPath[0][1]; //X Co-Ords
element.realPath[0][2]; //Y Co-Ords
Solution
element.realPath[0][1]; //X Co-Ords
element.realPath[0][2]; //Y Co-Ords
I am writing some application with Raphael.js. And it should handle mouse drag events.
That is, when mouse drag is ended, i try to catch the point on the Raphael's Paper object (DIV / SVG element, actually) where the mouse caused drop event.
FireFox and Chrome are doing well with event.layerX and event.layerY properties. But Opera does not have those.
It has clientX / clientY, offsetX / offsetY and pageX / pageY properties (may be mistaken in the last two' names) however. But i can't create any algorithm to calculate the final mouse position.
See, the mouse starts "dragging" pin of an circuit symbol (without actual dragging its image) and ends dropping on another one:
So, Opera shows coordinates like (5, 7) when mouse causes drop event. I assume these are the coordinates around the second pin. But i do not need those - using them i can not find the pin user tries connect to.
So, the questionis: do you know any way to find the mouse cursor coordinates when the drop event is called, relatively to the parent element it is dropping (e.g. Raphael's Paper object and / or its container in the case described).
Can you keep updating variables with the location of the cursor during mouse move when the mouse button is down and use the last values set when the drop is fired?
I'm building a web-app that will allow users to drag and drop from a static set of 30 draggable elements onto a droppable canvas. I want to record the draggable elements positions inside the droppable div with x & y offsets from the top left corner.
My current strategy for doing this is to first use .offset() to record the x&y position of the droppable div and then subtract this from the .offset() returned by the draggable element that was dropped to get the position from top left corner of the droppable. I will then convert my X & Y values into percentages of the width and height of the box.
Is there a better way of doing this? Will I run into problems later when I try and display saved sets of elements with positions inside the div? Thanks!
I think as long as you also save the height, width of the box then it can be reconstructed as you have all the required data to do so.