Home > Articles > Web Development > HTML/CSS

  • Print
  • + Share This
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:

  1. Open draganddrop.html using a text editor such as Windows WordPad.
  2. 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>
  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 can see the draggables and the targets as shown in Figure 3.3.

Figures 3.3

Figure 3.3 The draggables and targets in draganddrop.html.

  • + Share This
  • 🔖 Save To Your Account