SimpleDD: Simplified Drag and Drop for Prototyping

Overview

The Yahoo! User Interface Library has a number of nice features such as drag & drop and animation. Often, when you are wanting to prototype an HTML page, it would be nice to be able to sprinkle in a dash of drag & drop or decorate elements with animation.

The YAHOO.proto.SimpleDD makes it easy to add drag and drop to an HTML page.

Examples

The following examples shows the progression of an HTML page from plain markup to full drag and drop with animated drop.

• Simple Mockup - No Drag and Drop: Step one. Start with a simple HTML page.
• Default Drag and Drop: Step two. Add a YAHOO.proto.SimpleDD to the page to get basic drag & drop functionality.
• Customized Drag and Drop - No Animation: Step three. Add some custom logic to animate a drop invitation.
• Customized Drag and Drop - With Animation: Step four. Customize the drop further by animating the drop.

Here are some additional examples:

• The simplest page possible with Drag and Drop: No configuration parameters passed.
• Two Drag and Drop groups.: Demonstrates how to have different groups for of drag & drop interactions.

Usage

Getting Started

To use the SimpleDD component, include the source file for SimpleDD and its dependencies in your web page with the following script tags:

<script src="yahoo.js"></script> 
<script src="event.js"></script>  
<script src="container_core.js"></script>  
<script src="dom.js"></script>  
<script src="animation.js"></script> 
<script src="dragdrop.js"></script> 

<!-- Source file -->
<script src="proto.js"></script>      
      

The SimpleDD object is defined by YAHOO.proto.SimpleDD.

Instatiating the SimpleDD

The most basic way to add drag & drop to the page is to tell the SimpleDD object what CSS class name marks the draggable items and which CSS class name marks the drop sites. The configuration parameters: dragClass and dropClass define these areas of the page.

      	var dd = new YAHOO.proto.SimpleDD("pictureDragger",
		{
			"dragClass":       "dragme",
			"dropClass":       "drophere"
		}
	);
	
	[html markup]
	
	<div id="first-item" class="dragme">First Item</div>
	<div id="second-item" class="dragme">Second Item</div>
	<div id="Third-item" >Second Item</div>
	<div id="drop-site" class="drophere">Drop It Here!</div>
	

The first parameter defines the name of this SimpleDD instance. It is used to define an interaction group. All items registered in the SimpleDD (both draggable and drop sites) will work together in the same interaction group. If you need a second set of drag items with different targets, then define a new SimpleDD with a different interaction group name.

In this example the DIVs first-item and second-item will be draggable because they share the class name dragme (passed to the SimpleDD constructor).

However, the DIV third-item will not be draggable since it does not have this class name.

Generally you will create a SimpleDD instance in the onload event for the document's body.

	<script type="text/javascript">
		var pageLoad = function() 
		{
			var dd = new YAHOO.proto.SimpleDD("pictureDrag");
		}
		YAHOO.util.Event.addListener(window, 'load', pageLoad);

	</script>
 		this.onMouseDownHandler = this.cfg.getProperty("onMouseDown");
 		this.startDragHandler = this.cfg.getProperty("startDrag");
 		this.onDragHandler = this.cfg.getProperty("onDrag");
 		this.onDragEnterHandler = this.cfg.getProperty("onDragEnter");
 		this.onDragOverHandler = this.cfg.getProperty("onDragOver");
 		this.onDragOutHandler = this.cfg.getProperty("onDragOut");
 		this.onDragDropHandler = this.cfg.getProperty("onDragDrop");
 		this.endDragHandler = this.cfg.getProperty("endDrag");
 		this.onMouseUpHandler = this.cfg.getProperty("onMouseUp");

	

Configuring the SimpleDD component

When instantiating the SimpleDD object, the second parameter to the constructor is a YAHOO.Config object. Here are the attributes you may set:

Downloading

You can download the proto.js file here:

• proto.js
• proto-0.1.0.zip - Examples & Component (Updated 7/09/06)