van an nguyen

Add visual feedback

Add visual feedback when you drag something, when the mouse enters a drop zone, etc.

We can associate some CSS styling with the lifecycle of a drag and drop. This is easy to do as the drag and drop API provides many events we can listen to, and can be used on the draggable elements as well as in the drop zones:

    • dragstart: this event, which we discussed in a previous section, is used on draggable elements. We used it to get a value from the element that was dragged, and copied it onto the clipboard. It’s a good time to add some visual feedback – for example, by adding a CSS class to the draggable object.
    • dragend: this event is launched when the drag has ended (on a drop or if the user releases the mouse button outside a drop zone). In both cases, it is a best practice to reset the style of the draggable object to default.

The next screenshot shows the use of CSS styles (green background + dashed border) triggered by the start of a drag operation. As soon as the drag ends and the element is dropped, we reset the style of the dragged object to its default. The full runnable online example is a bit further down the page (it includes, in addition, visual feedback on the drop zone):

drag n drop colorful

Source code extract:

  1. …
  2. <style>
  3.   .dragged {
  4.      border: 2px dashed #000;
  5.      background–color: green;
  6.   }
  7. </style>
  9.   function dragStartHandler(event) {
  10.      // Change CSS class for visual feedback
  11.      event.target.style.opacity = ‘0.4’;
  12.      event.target.classList.add(‘dragged’);
  14.      console.log(‘dragstart event, target: ‘ + event.target);
  15.      // Copy to the drag’n’drop clipboard the value of the data* attribute of the target,
  16.      // with a type “Fruits”.
  17.      event.dataTransfer.setData(“Fruit”, event.target.dataset.value);
  18.   }
  20.   function dragEndHandler(event) {
  21.      console.log(“drag end”);
  22.      // Set draggable object to default style
  23.      event.target.style.opacity = ‘1’;
  24.      event.target.classList.remove(‘dragged’);
  25.   }
  26. script>
  27. …
  28. ol ondragstart=“dragStartHandler(event)” ondragend=“dragEndHandler(event)” >
  29.     li draggable=“true” data–value=“fruit-apple”>Applesli>
  30.     li draggable=“true” data–value=“fruit-orange”>Orangesli>
  31.     li draggable=“true” data–value=“fruit-pear”>Pearsli>
  32. ol>

Notice at lines 12 and 24 the use of the classlist property that has been introduced with HTML5 in order to allow CSS class manipulation from JavaScript.

Other events can also be handled:

    • dragenter: usually we bind this event to the drop zone. The event occurs when a dragged object enters a drop zone. So, we could change the look of the drop zone.
    • dragleave: this event is also used in relation to the drop zone. When a dragged element leaves the drop zone (maybe the user changed his mind?), we must set the look of the drop zone back to normal.
    • dragover: this event is also generally bound to elements that correspond to a drop zone. A best practice here is to prevent the propagation of the event, and also to prevent the default behavior of the browser (i.e. if we drop an image, the default behavior is to display its full size in a new page, etc.)
    • drop: also on the drop zone. This is when we actually process the drop (get the value from the clipboard, etc). It’s also necessary to reset the look of the drop zone to default.

Complete example with visual feedback on draggable objects and the drop zone

The following example shows how to use these events in a droppable zone. 

Try it in your browser below or directly at CodePen:

Complete source code (for clarity’s sake, we put the CSS and JavaScript into a single HTML page):

  4.    
  5.      div {
  6.         height: 150px;
  7.         width: 150px;
  8.         float: left;
  9.         border: 2px solid #666666;
  10.         background–color: #ccc;
  11.         margin–right: 5px;
  12.         border–radius: 10px;
  13.         box–shadow: inset 0 0 3px #000;
  14.         text–align: center;
  15.         cursor: move;
  16.      }
  18.      .dragged {
  19.         border: 2px dashed #000;
  20.         background–color: green;
  21.      }
  23.      .draggedOver {
  24.         border: 2px dashed #000;
  25.         background–color: green;
  26.      }
  29.      function dragStartHandler(event) {
  30.         // Change css class for visual feedback
  31.         event.target.style.opacity = ‘0.4’;
  32.         event.target.classList.add(‘dragged’);
  34.         console.log(‘dragstart event, target: ‘ + event.target.innerHTML);
  35.         // Copy in the drag’n’drop clipboard the value of the data* attribute of the target,
  36.         // with a type “Fruits”.
  37.         event.dataTransfer.setData(“Fruit”, event.target.dataset.value);
  38.      }
  40.      function dragEndHandler(event) {
  41.         console.log(“drag end”);
  42.         event.target.style.opacity = ‘1’;
  43.         event.target.classList.remove(‘dragged’);
  44.      }
  46.      function dragLeaveHandler(event) {
  47.         console.log(“drag leave”);
  48.         event.target.classList.remove(‘draggedOver’);
  49.      }
  51.      function dragEnterHandler(event) {
  52.         console.log(“Drag enter”);
  53.         event.target.classList.add(‘draggedOver’);
  54.      }
  56.      function dragOverHandler(event) {
  57.         //console.log(“Drag over a droppable zone”);
  58.         event.preventDefault(); // Necessary. Allows us to drop.
  59.      }
  61.      function dropHandler(event) {
  62.         console.log(‘drop event, target: ‘ + event.target);
  63.         // reset the visual look of the drop zone to default
  64.         event.target.classList.remove(‘draggedOver’);
  66.         var li = document.createElement(‘li’);
  67.         // get the data from the drag’n’drop clipboard, with a type=”Fruit”
  68.         var data = event.dataTransfer.getData(“Fruit”);
  70.         if (data == ‘fruit-apple’) {
  71.             li.textContent = ‘Apples’;
  72.         } else if (data == ‘fruit-orange’) {
  73.             li.textContent = ‘Oranges’;
  74.         } else if (data == ‘fruit-pear’) {
  75.             li.textContent = ‘Pears’;
  76.         } else {
  77.             li.textContent = ‘Unknown Fruit’;
  78.      }
  79.      // add the dropped data as a child of the list.
  80.      document.querySelector(“#droppedFruits”).appendChild(li);
  81.    }
  82.   
  83. </head>
  84. <body>
  85. <p>What fruits do you like? Try to drag an element!</p>
  86. <ol ondragstart=“dragStartHandler(event)“ ondragend=“dragEndHandler(event)“ >
  87.     <li draggable=“true” data-value=“fruit-apple”>Apples</li>
  88.     <li draggable=“true” data-value=“fruit-orange”>Oranges</li>
  89.     <li draggable=“true” data-value=“fruit-pear”>Pears</li>
  90. </ol>
  91.  id=“droppableZone” ondragenter=“dragEnterHandler(event)“ ondrop=“dropHandler(event)“
  92.       ondragover=“dragOverHandler(event)“ ondragleave=“dragLeaveHandler(event)“>
  93.       Drop your favorite fruits below:
  94.       
       id=“droppedFruits”>
  95.  
  • <body>
  • <html>