How to Create a Droppable Interface in CSS3 - dummies

How to Create a Droppable Interface in CSS3

By John Paul Mueller

Sometimes a user needs to drag an item to a container and drop it in the container. There are many instances of this CSS3 process in current applications.

For example, the concept of dragging an item to a trash can and dropping it to delete it is consistent across all platforms. If you want to send an item to the printer, you drag its icon to the printer icon and drop it there.

Of course, to create this effect, you must have one item that’s draggable and another item that’s droppable. This example relies on some custom CSS to create a particular effect onscreen.

 border: solid;
 width: 400px;
 height: 10em;
 text-align: center;
 line-height: 10em;
 position: absolute;
 top: 250px;
 left: 250px;
 background-color: lightblue;

There are two states for the droppable container: empty and filled. It starts out empty and uses the #FillMe style. When the draggable paragraph is dropped into the droppable paragraph, the style changes to .Filled. The following code shows how dragging and dropping can work together to create this desirable user interaction.

You can find complete code for this example in the Chapter 06Interactions folder of the downloadable code as DropContent.HTML.

  drop: function(event, ui)

This example uses the same code for the MoveMe <p> tag. A second <p> tag, with the id of FillMe, acts as a container. When a user drags MoveMe to FillMe, the code calls the anonymous function associated with the drop event.

Notice how the example begins with the event name, followed by a colon (:), followed by the anonymous function to handle that event. Notice how the code uses addClass() to modify the class of FillMe. The droppable() method supports these events:

  • create: Indicates that the droppable item has been created.

  • activate: Indicates that a draggable item is active. You can use this event to change the droppable item style so that the user can see where to drop an item.

  • deactivate: Indicates that the user has stopped dragging an item. You can use this event to change the droppable style back to its original state.

  • over: Fires when the draggable item is over the top of the droppable item. You can use this event to indicate when the user should release the mouse to drop the item into the container.

  • out: Fires when the draggable item has moved out of the droppable item container. You can use this event to tell the user that it’s no longer possible to drop an item into the container.

  • drop: Tells the droppable item (the container) that it has received a draggable item.

You can create an event handler for any of the events you want to handle in your code. In fact, there are several opportunities for special effects that would focus the user’s attention.