Hi everyone 
, D here. In today’s tutorial we will looking at how to create a ‘drag and drop’ & ‘dropzone’ functionalities for any element we want in Weweb. I saw a lot of posts asking about draggable elements and when I was building my own project I needed one and had to make it for myself, so I wanna share how anyone can do it with one little code.
THE PROBLEM - I have this screen element would love to be able to drag from one place to another, OR I wanna drag an element and DO something on dropping it
THE SOLUTION -
- We are gonna use three variables along with one JavaScript snippet to achieve our functionality.
- Create three variables call them x-position, y-position and drag_is_on (you can call them anything you want tbh)
- Now create a global workflow call it start_draggable. Add a custom javascript action to it and add this code (make sure you replace the values in braces):
// Function to save the emitted mouse position on moving it
function saveMouseMovement(event) {
{variable x-position} = event.clientX;
{variable y-position} = event.clientY;
{variable drag_is_on) = true;
}
// Function to remove the mouse movement tracking via a double click
function stopTracking() {
document.removeEventListener('mousemove', saveMouseMovement);
document.removeEventListener('dblclick', stopTracking);
{variable drag_is_on) = false;
}
// Add event listener for mouse movement
document.addEventListener('mousemove', saveMouseMovement);
// Add event listener for double click event to stop tracking
document.addEventListener('dblclick', stopTracking);
-
Now to allow any element to be ‘draggable’ freely across the canvas. You need to go to the position property of the element and set it to ‘fixed’. Now you will see 4 new options appear ‘top’, ‘left’ ‘right’ ‘bottom’. Set ONLY TOP and LEFT, bind them to the y-position and x-position variables you made.
So:
x-position == left
y-position == top -
Now for good UX, you can place a small icon in the top left corner of the widget and change the cursor settings of the icon from ‘auto’ to ‘grab’ (this will let your users know that the element is draggable when they hover over it)
-
Add a workflow to your icon that will execute the workflow start_draggable which you made in step 2
Voila! that’s it! You will be able to now drag that element anywhere you like on the screen 
- If you wanna stop the drag just double click and the drag will stop.
HOW TO ADD a ‘dropzone’ feature?
So for this you can set up the second element that will serve as the ‘drop zone’
On that element you start your workflow, but change the trigger in your weweb editor FROM on-click TO on-mouse enter
Now when you begin the drag, drag it to your dropzone, double-click so the drag will end (the dropzone action will trigger by itself once your mouse enters it!
That’s it folks. A super effective way to drag and drop any element you want, and trigger dropzone actions too.
See you in the next tutorial
PS, you can use the ‘drag_is_on’ boolean variable to change a UI element color (e.g. the drag icon) to visually let your users know when they have drag enabled or disabled
ADDITIONAL NOTES FOR ELEMENTS ALREADY SET IN PLACE IN YOUR UI
if you have an element that ALREADY exists, AND is visible on a page, and you wanna be able to click on that element and be able to drag it anywhere (ideally that’s a longer process and requires code, as you ought to inherently edit the element’s property -
BUT one no-code way I suggest is simple - create two EXACT copies of your element - one with a normal positioning, and the ‘draggable’ variant with ‘fixed’ positioning. Hide the draggable variant by default (since drag_is_on = false, set it’s visibility to drag_is_on. Now when your user clicks on the normal element (whose visibiliy is opposite of drag_is_on) trigger the start_draggable workflow. What will visually happen is that the normal element variant will disappear and the draggable variant will appear at your mouse position and be immediately draggable. So to the end user it will appear like they clicked on a card and it became draggable) If you wanna do something on drop, then use the dropzone tutorial above, and if you wanna change the UI position on drop back to your normal layout then you gotta use the ‘watch position’ feature of Weweb so as to snap it into place (but I STRONGLY suggest you just use the Kanban Component instead for that use case)…
