Correct way to pull draggable item from the outside and converting it to a moveable on the fly?

[CarlMahnke1]

Environments

• Moveable Component version: 0.47.9
• Selecto: 1.22.1

Description

I want to have this: On my left panel are items (placeholders) that are draggable in the classic way. When those are pulled into my drag area, the classic drag image will be hidden and at the same location, I create a new html element that is already in the state of dragging, so we have a seamless transition. When the left mouse button is released, that dragged element is finally placed AND the placeholder still resides in the left panel, so he can be placed many times.

My test code:

Problem is: whenever the dragEnter is triggered, the new element is placed and it is selected, but it doesn't move with the mouse. Only when I lift the left mouse button, the element will snap to the mouse cursor and will move with it (even though no button is pressed anymore).
I have the feeling, that my way of approaching this problem is fundamentally wrong. What would be the correct way?
Thanks!

[CarlMahnke1]

I just found out, that it is not possible to switch the dragging (Ghost) image in the dragenter event for security reasons. So, my proposed idea cannot work.

Therefore, let me re-phrase my requirement:
-I need a left panel with available elements; they can be dragged into the drop zone
-When they are dropped outside the drop zone, then they will reset to their original position
-When they are dropped into the dropzone, they still shall be avilable in the left panel (can be placed many times)
-When they enter the drop zone, snapping to guidlines or grid shall activate

Is there a vanillaJS demo for this? Or what would be a good practice?
Thank you!

[CarlMahnke1]

Okay, almost there!
I have a demo ready at (thanks to James Pistell for the base project):
https://codepen.io/Carl-Mahnke/pen/qBJgzVg

Dealing with the HTML5 default dragging image is a real pain and I would appreciate it, if moveable would come with a default solution to this!

@daybrush I still haven't figured out how to get the element guidelines right (see demo). Currently, only the first element with class ".selectable" is subject to snapping. All other elements (that are dynamically created) with class ".selectable" can only snap to the first element, but to nothing else.
Question: Do I have to provide a unique classname for every created element, that should be snappable? Thanks!

[daybrush]

@CarlMahnke1

• croact-moveable 0.4.0
• @moveable/helper 0.1.2
• lit-moveable 0.25.0
• moveable 0.48.0
• preact-moveable 0.50.0
• react-moveable 0.51.0
• svelte-moveable 0.40.0
• vue-moveable 2.0.0-beta.76
• vue3-moveable 0.23.0
• ngx-moveable 0.45.0

moveable's new version is released.
Refer to my codepen:

https://codepen.io/daybrush/pen/poQzyEW

[CarlMahnke1]

@daybrush Works like a charm! Amazing!

For those who are interested, here is the final codepen:
https://codepen.io/Carl-Mahnke/pen/zYMOdbp