vue-drag-drop
vue-drag-drop copied to clipboard
cameronhimself
Question: How can I dynamically center the drag image on the cursor?
I've hard-coded an offset of x: 100, y: 100 for a custom drag image. It's alright, but I'd love to be able to dynamically center the cursor on the image when dragging. Do you know how I might accomplish this? Would I need to programmatically detect the current cursor position?
Current behaviour (the image jumps a bit depending on where the starting position of the cursor is):
Is this what you're trying to accomplish? https://jsfiddle.net/fuz987r5/3/
Not quite. Notice how the dragged image snaps to the middle regardless of size? If you don't use a custom element, the image is picked up wherever the cursor happens to be.
I don't understand what you're trying to accomplish. Do you want the drag image to snap to center of the cursor when not using a custom drag image? If so, it's a simple modification to the fiddle: https://jsfiddle.net/cameronhimself/eocav2w3/1/
Still technically using a custom drag image, of course, but it doesn't look like it to the end user.
Sorry, I'm not doing a good job of explaining myself. Hopefully this video will clarify things:
The image on the right is not the custom drag image. The image on the left is. Notice how the image on the right doesn't snap to the center, but stays where it is in relation to the cursor, when the drag starts. The image on the left snaps to the center.
The behaviour I want is the one for the image on the right. The most natural effect is that the image attaches to the cursor at exactly the point where it was clicked. No jumping.
If you've ever used trello or most other kanban style boards, you'll notice that this is the standard behaviour. I don't know how to achieve this effect given the offset properties you provide.
You need to recalculate the x and y offsets based on the cursor position on mousedown. Neither click nor dragstart work, because the former doesn't fire on drag, and the latter fires too late. The Drag component does not expose the mousedown event, so you need to user a wrapping div, like so: https://jsfiddle.net/cameronhimself/7cLj6bws/5/
Note that this will seem weird if your drag image is wildly different from your stationary content. I suspect that's why it doesn't work this way by default--there's no explicit or implied parity between the drag and the stationary content.