␡
- 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
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:
- Open draganddrop.html using a text editor such as Windows WordPad.
- 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> - 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 Dragging and dropping with draganddrop.html.