With few lines of JavaScript, you can drag and drop table content. Content of the HTML table cells can be dragged to the another table cell or another table. It isn’t so difficult to define onMouseMove event and change top / left element styles to move the object. In case with table, you will have to determine destination table cell. Attaching onMouseOver handler to the table cells will not help, because browser will not fire events to the elements beneath the dragged object.

Anyway, after taking care of the current scroll position and calculating table cells positions, here is example that should work in FireFox 3, Internet Explorer 6 and Google Chrome. Please try to drag green, blue or orange bordered objects and click on “Click” button. Funny, isn’t it?

“Click” button will scan first table and display cell content. Instead of displaying, you can send this information to the server and save order of table content. Orange object “Clone” will be duplicated first because of “clone” keyword in his class name. If you drop object on cell named “Trash”, object will be deleted from the table (with or without confirmation). Script has built in autoscroll and option to forbid landing to non empty cells or some cells named with class name. Table can contain rowspan or colspan cells and different background color for every cell.

Here are minimal steps to enable content dragging in table:

      * put <script type="text/javascript" src="drag.js"></script> to the head section
    * place table(s) inside < div id="drag"> to enable content dragging
    * add .drag{position: relative;} class to your css
    * place < div class="drag">Hello World to the table cell
 

Other features:

* forbid dropping object to some table cell (add ‘forbid’ class name to the table cell)
* clone object (add ‘clone’ class name to the div object like
* drop objects only to empty cells
* switch content of table cells
* trash cell (add ‘trash’ class name to the table cell)
* enabled custom handlers to place code on events: clicked, moved, not moved, dropped, switched, cloned, deleted and undeleted
* delete cloned div if the cloned div is dragged outside of any table

How drag.js works?

Script will search for all div elements (with “drag” in class name) inside tables closed in < div id="drag" > and attach onMouseDown event handler. When user click with left mouse button on div element, onMouseMove and onMouseUp handlers will be attached to the document level as you can see in code below.

function handler_onmousedown(e){
	// define event (cross browser)
	var evt = e || window.event;
	// enable control for form elements
	if (isFormElement(evt)) return true;
	// set reference to the clicked object
	obj = this;
	// set high z-index if object isn't "clone" type - clone object is motionless
	if (obj.className.indexOf('clone') == -1) obj.style.zIndex = 999;
	// set clicked position
	mouseX = evt.clientX;
	mouseY = evt.clientY;
	// set current table, row and cell
	set_tcr(evt);
	// remember start position (table, row and cell)
	table_source = table;
	row_source   = row;
	cell_source  = cell;
	// define pressed mouse button
	if (evt.which) mouseButton = evt.which;
	else           mouseButton = evt.button;
	// activate onmousemove and onmouseup event handlers on document level
	// if left mouse button is pressed
	if (mouseButton == 1){
		moved_flag  = 0; // reset moved_flag (needed for clone object in handler_onmousemove)
		cloned_flag = 0; // reset cloned_flag
		document.onmousemove = handler_onmousemove;
		document.onmouseup   = handler_onmouseup;
		myhandler_clicked(); // call myhandler
	}
	// remember background cell color
	bgcolor_old = tables[table].rows[row].cells[cell].style.backgroundColor;
	// define object offset
	var offset = box_offset(obj);
	// calculate ofsset from the clicked point inside element to the
	// top, right, bottom and left side of the element
	obj_margin = [mouseY-offset[0], offset[1]-mouseX, offset[2]-mouseY, mouseX-offset[3]];
	// disable text selection
	return false;
}
  

While dragging div element, script changes “left” and “top” styles of the object. This is function of the onMouseMove handler. When user releases left mouse button, onMouseUp event handler will unlink onMouseMove and onMouseUp event handlers. This way, browser will listen and process mouse move only when user click and hold left mouse button on div element inside table.

As I mentioned before, onMouseDown is defined on the elements you want to drag. When user starts to drag, elements beneath will not be able to catch onMouseOver event (elements beneath are table cells). Why? Because you are dragging element and that element only can catch onMouseOver.

So, to detect destination table cells, script calculates all table cell coordinates (with scroll page offset) and store them to the arrays. Arrays are searched inside onMouseMove handler and when user release left mouse button, object will drop to the current table cell.

Demo: http://www.redips.net/javascript/drag-and-drop-table-content/
Download: http://www.redips.net/my/tar/redips2.tar.gz
Source: http://www.redips.net/javascript/drag-and-drop-table-content/

Related Listings:

1. Table Drag n Drop Script I’ve been using JQuery for a while now and really...
2. DHTML API, Drag & Drop for Images and Layers – Ajax – Javascript A Cross-browser JavaScript DHTML Library which adds Drag Drop functionality...
3. Collapsible-Drag-Drop Javascript Panels This script will give you a good idea of what...
4. Simple Drag n Drop When the ‘#’ link in the example boxes is activated...
5. iGoogle-like Drag & Drop Portal v2.0 A cool drag & drop class in Prototype in combination...

Do you like this post?

Email: