Drag And Drop using Javascript 02

Video Tutorial


In that last tutorial, we covered the basic dragging system and we can interact with elements and drag them over the page and the main idea behind drag and drop effects, in the second part we are going to finish the application (Simple App) by implementing the todo item drop and snap into position effect, so let’s start.

Drop Todo Container (Preview)

So the effect we want to achieve is whenever we are holding the item and it’s over the todos container we need to show a snap container that is going to be the container that holds the currently being held todo, for this to work we need to create a snap items (divs) and add them to the todos container as a child but it will remain invisible till we bring the todo item over it, so all we need to do is loop and create multiple snap containers we already have the style defined for that then we add them as a childs.

for(let i = 0; i < 6; i++) {
  let snap = document.createElement("div");
  //The .snap class will only create the container (width and height and position)
  snap.className = "snap";
  //Make Sure to Refrence the Todos Container

Now the containers are being added to the DOM more specific to the Todos Container pretty good.

For this to work properly we need to show the currently over snap container while we are holding (Dragging) a Todo Item (Showing only means assigning a new Style Class that has a background and border properties for the container)

We have to check for the collision between the todo item and any snap container every amount of seconds (100ms perfect value) we will use the setInterval also we are going to use a predefined function that will help us to check for the collision between two elements at a time and returns true if there are any collision else false.

//Execute a Function avery number of seconds
setInterval(() => {
   let snaps = document.getElementsByClassName("snap");
   for(let i = 0; i < snaps.length; i++) {
     //Clear the Over class every time (Hide Elements are not under collision)
     snaps[i].className = snaps[i].className.replace("over", "");
     if(doElsCollide(currentTodo, snaps[i])) {
       //There is a collision then we are good to
       snaps[i].className += " over"; ///< Over class will show the snap container 
}, 100);

Also, make sure to reference the current todo whenever we click todo item (Mouse Down under Todo Element)

let currentTodo = null; ///< Initialize as NULL
function onMouseDown(e, item) {
  currentTodo = item;

Try Now to drag and Hold a todo item over the Todos Container, you should get a preview of the container you will drop in the todo item, but still when we drop we get no snapping to position effect, therefore, we are going to create a new Function that is going to allow us to snap todo item position when we drop it under the container’s position.

Snap Todo Into Position

Snapping basically means setting the todo item position into the container’s position in order to get the snapping into position effect, pretty easy.

function snapTodo(todo, container) {
  //Get the Container Details (Position, Size...)
  let box = container.getBoundingClientRect();
  //Set todo Position the same as the container's (X:left, Y:top)
  todo.style.left = box.x + "px";
  todo.style.top = box.y - 10 + "px"; ///< Minus 10 (for making it perfect)

And we want to snap todo whenever we are holding and over one of the snap containers as well as we drop out the todo element (Drop out = Mouse Up = !isMouseDown)

setInterval(() => {
  if(!isMouseDown) {
    //Snap Current Todo under Current Snap Container :)
    snapTodo(currentTodo, snaps[i]);
}, 100);

Now you Should be able to drag and drop and snap todo items under todos container in a very nice effect.

What’s Next

So this is all we have to cover for the Implementation of the Drag And Drop Effect using Native Javascript, if you have any new tutorial suggestions please let us know

No Comments Yet