Home > Articles > Web Development > HTML/CSS

  • Print
  • + Share This
This chapter is from the book

Ending Drop Operations

When a draggable <div> element is dropped, its ondragEnd event occurs, and we've tied that event to the JavaScript function end(). We'll add code to the end() function to clear the data stored in the dataTransfer object (that is, the ID of the element being dragged) now that the drop operation is finished. Just follow these steps:

  1. Open draganddrop.html using a text editor such as Windows WordPad.
  2. Add the following code to the <script> section of dragdrop.html, creating the end() function and then ending the <script> section in draganddrop.html:
      function end(e)
      {
        e.dataTransfer.clearData("Data");
        return true
      }
    </script>
  3. Save draganddrop.html. Make sure you save this code in text format (the default format for WordPad, for example, is RTF, rich-text format, which won't work with browsers).

Now you've completed the draganddrop.html example and can drag and drop using any supported browser, as shown in Figure 3.4.

Figure 3.4

Figure 3.4 Dragging and dropping with draganddrop.html.

  • + Share This
  • 🔖 Save To Your Account