␡
- 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
Styling the Draggable and Target Elements
In this task, we'll make the <div> elements we use for the targets and draggables visible. In particular, we'll style the targets in cyan and the draggables in orange.
To do so, follow these steps:
- Open draganddrop.html using a text editor such as Windows WordPad.
- Add the following code to style the draggable <div> elements and the target <div> elements, as well as give them a size.
<!DOCTYPE HTML> <html> <head> <title> Drag and Drop Example </title> <style type="text/css"> #target1, #target2, #target3 { float:left; width:250px; height:250px; padding:10px; margin:10px; } #draggable1, #draggable2, #draggable3 { width:75px; height:70px; padding:5px; margin:5px; } #target1 {background-color: cyan;} #target2 {background-color: cyan;} #target3 {background-color: cyan;} #draggable1 {background-color: orange;} #draggable2 {background-color: orange;} #draggable3 {background-color: orange;} </style> </head> <body> <h1>Drag and Drop Example</h1> <div id="target1" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)"> <div id="draggable1" draggable="true" ondragstart="return start(event)" ondragend="return end(event)">1 </div> <div id="draggable2" draggable="true" ondragstart="return start(event)" ondragend="return end(event)">2 </div> <div id="draggable3" draggable="true" ondragstart="return start(event)" ondragend="return end(event)">3 </div> </div> <div id="target2" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)"> </div> <div id="target3" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)"> </div> </body> </html> - 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 can see the draggables and the targets as shown in Figure 3.3.
)
Figure 3.3 The draggables and targets in draganddrop.html.