␡
- Welcome to Drag and Drop
- Getting to Know the Drag-and-Drop API
- Starting the Drag-and-Drop Example
- Styling the Draggable and Target Elements
- Starting the Drag Operation
- Allowing Dragged Objects to Enter the Targets
- Allowing Dragged Objects to Be Dropped on Certain Targets
- Handling Drop Events
- Ending Drop Operations
- The draganddrop.html Example Code
This chapter is from the book
This chapter is from the book
This chapter is from the book
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:
- Open draganddrop.html using a text editor such as Windows WordPad.
- 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; } - 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.