Home > Articles > Web Development > HTML/CSS

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

Allowing Dragged Objects to Enter the Targets

When the user drags a draggable <div> element to a target <div> element, the target <div> element's ondragEnter event occurs. We've tied that event to a JavaScript function named enter(), and in that function, we want to indicate that draggable objects are allowed to enter the target by returning a value of true from the enter() function.

To do that, 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 enter() function and returning a value of true from it, indicating that draggable elements may enter a target:
    function enter(e)
    {
      return true;
    }
  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 the user will be able to drag the draggable <div> elements to the targets.

  • + Share This
  • 🔖 Save To Your Account