Drag detection

Hi! Welcome to the drag and drop lesson. 

So, the first thing is that before looking at examples is that you must know that not all elements in an HTML document are draggable by default.  

By default, a text selection is draggable, as you can see... 

An image is draggable too, but you cannot drag a H1 or drag a list item without adding first a draggable=true attribute. 

So, in the examples we are going to detail. 

We added draggable=true to the elements that will be candidate for drag and drop. 

Also, the first this you must do, before doing anything, is to detect that an element has been dragged. 

For this we are using the ondragstartstart event listener, so either as an attribute here, or in the JavaScript. 

And, in that case we use a dragstart listener on the numbered list, and children will inherit this event listener. 

This is another particularity: you can define event listeners, for the drag and drop on parents. 

And the children inherit this listener. 

So let's look at a small example with drag and drop of list items. 

The code we have here on CodePen is the same as (the one) I've just showed in the course. 

We've got a list with an ondragstart event handler, and we've got list items with draggable=true. 

The code from the drastart handler is just showing an alert. 

If I click and start to drag one item while maintaining the button pressed, it displays a dragstart event. 

What we show here is that we display the alert (the event.target), that means "the element that raised, that fired the event". ".innerHTML », so it displays the content. 

Instead of using "innerHTML" to get the HTML content here (the text inside the list item), I can also use the dataset interface that is also an addition from HTML5. 

And we can now add "data attributes" that start with "data" followed by a minus sign, and this is the name of the data attribute ("value"- in this case), so I can use the dataset interface followed by the name of the attribute, and it will produce the same thing: fruit-apple.  

And I can name it as I like: I can call it "data-fruit" and, use it here... and it works too. 

I can get the content! 

And these attributes, these data attributes, are all valid! I go back to the initial code.

Once we managed to detect a drag, and can get some values... some interesting values from the dragged object, now we will detect a drop! So, what do we do when we want to drag something and drop it somewhere, and make something happen in the drop zone? We need to copy, in the dragstart handler, some data that will be obtained back in the drop handler. 

There is a clipboard called event.dataTransfer, that is specialized for drag and drop. 

And it's got a setData method for writing in it a key/value pair, so here we copy, with the name "fruit", the value of the data attribute of the dragged object. 

And in the drop handler, we will get back the data that was copied in the drag and drop clipboard, using getData. 

So we wrote a value with a key="fruit",  we get this value back here. 

And in the drop handler, in that case, we create a list item element and then we initialize, we set the text content of the list item, with the value corresponding to the value we got back from the clipboard.

And then, we just add to do drop zone...  (#droppedFruits)...appendChild() the list item. 

Let's look at how the drop zone was defined: the drop zone in that example is a div. 

We've got an ondrop listener, that calls the drop callback we just saw.

And we also added an ondragover="return false" listener. 

This will avoid the propagation of the event, because when we drag over the drop zone,  each mouse movement will fire a lot of dagover events and this can slow down the browser... so in that case we just returned false for performance reasons. 

So, when I drop it, I'm in the drop handler, I get back "Apples », I creates a list item, I set the list item content with "Apples", and I append the list item to the drop, to the div. 

That's all for this video! You understood the main steps for doing drag and drop: detect a drag, copy some data in the clipboard, detect a drop, get back the data and do something. 

And avoid firing too many events by just stopping the propagation with an ondragover="return false"; See you for the next video! I will explain how to give a nice visual feedback when we drag and drop things.

Complete code from the example:

<!DOCTYPE html>

<html lang="en">

<head>

   <script>

     function dragStartHandler(event) {

         alert('dragstart event, target: ' + event.target.innerHTML);

     }

   </script>

</head>

<body>

  <p>What fruits do you like? Try to drag an element!</p>

  <ol ondragstart="dragStartHandler(event)">

      <li draggable="true" data-value="fruit-apple">Apples</li>

      <li draggable="true" data-value="fruit-orange">Oranges</li>

      <li draggable="true" data-value="fruit-pear">Pears</li>

  </ol>

<p>Drop your favorite fruits below:</p>

 <body>

<html>

In this script, the event handler will only display an alert showing the name of the target element that launched the event.