JavaScript Drag and Drop example 2

This post shows how to use Drag and Drop library described in my previous post Drag and drop table content with JavaScript. HTML table is stylized to have left column with content, main table and message line. Elements on the left side (green and orange) should be placed to the coloured table cells. After elements are correctly sited, appropriate message will be displayed. Please try ...

Now follows HOWTO. First step is to include drag.js library from redips2.tar.gz package. Package contains source code (well commented), so you will have to compress drag.js from the package to minimize bandwidth or you can use already compressed drag.js library.

<script type="text/javascript" src="/my/drag.js"></script>

And the second step is to initialize / configure Drag and Drop library. Only initialization is mandatory while other library properties have default values. You can see how to define destination table cells for green and orange elements. It's possible to define destination cells for each dragged element. At the beginning, left column contains green and orange elements with id="green" and id="orange". This elements are defined to clone two elements. Cloned elements will get id greenc0 / greenc1 and orangec0 / orangec1.

window.onload = function () {
	// number of successfully placed elements
	var num = 0;
	// initialization
	REDIPS.drag.init();
	// set hover color
	REDIPS.drag.hover_color = '#9BB3DA';
	// define green elements for green cells
	REDIPS.drag.marked_exception.green = 'green_cell';
	REDIPS.drag.marked_exception.greenc0 = 'green_cell';
	REDIPS.drag.marked_exception.greenc1 = 'green_cell';
	// define orange elements for orange cells
	REDIPS.drag.marked_exception.orange = 'orange_cell';
	REDIPS.drag.marked_exception.orangec0 = 'orange_cell';
	REDIPS.drag.marked_exception.orangec1 = 'orange_cell';

	// this function (event handler) is called after element is dropped
	REDIPS.drag.myhandler_dropped = function () {
		var obj = REDIPS.drag.obj;	                 // reference to the dragged OBJect
		var mea = REDIPS.drag.marked_exception;	     // reference to the Marked Exception Array
		var tcn = REDIPS.drag.target_cell.className; // reference to the Target cell Class Name
		var msg; // message text
		// if the DIV element was placed on allowed cell, then make it a unmovable
		if (tcn.indexOf(mea[obj.id]) !== -1){
			obj.style.borderStyle = 'dotted';
			obj.style.cursor = 'auto';
			obj.onmousedown = null;
			// increase counter
			num++;
			// prepare and display message
			if (num < 6) msg = 'Number of successfully placed elements: ' + num;
			else         msg = 'Well done!';
			document.getElementById('message').innerHTML = msg;
		}
	}
}

Drag and Drop library has 11 event handlers:

1. myhandler_clicked
2. myhandler_moved
3. myhandler_notmoved
4. myhandler_dropped
5. myhandler_switched
6. myhandler_cloned
7. myhandler_clonedend1
8. myhandler_clonedend2
9. myhandler_notcloned
10. myhandler_deleted
11. myhandler_undeleted

In this example you can see how to use myhandler_dropped event handler and how to test if element is dropped to the allowed table cell. Example also shows how to define single content table cell on the globally defined "multiple" drop option. Single content cells are in the corners of the main table, while "multiple" is default option and it hasn't be defined explicitly. Hope this post will give some ideas of how to use Drag an Drop library.

This entry was posted on Tuesday, 02.02.2010. at 11:57and is filed under Drag and Drop, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.