Source:
http://www.redips.net/my/preview/REDIPS_drag/
Content of HTML table cells can be dragged to another table cell or
another table. It isn't difficult to define onMouseMove handler and
change top / left element styles to move the object. In case with
tables, you will have to determine somehow destination table cell.
Attaching onMouseOver handler on table cells will not work, because
browser doesn't 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
FF3, IE8, Google Chrome, Safari 5 and Opera 11. Please try to drag
green, blue or orange bordered DIV elements, change properties (radio
button and check-boxes) and click on "Save" button. |
|
"Save" button will scan tables, create query string and send to the
PHP page. Demo shows how to collect table content and accept parameters
on the server side. More about accepting parameters you can read in my
post
Reading multiple parameters in PHP."Clone"
elements (orange in this demo) will be duplicated first because of
"clone" keyword contained in 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 cells named with class "forbid". Table can
contain rowspan / colspan cells and different background color for
every cell.
Here are minimal steps to enable content dragging in table:
Other features of
redips-drag.js:
- functions and data structure are defined in namespace (easier integration with other JS frameworks)
- JSLint: No problems found in redips-drag.js (tough one, huh)
- REDIPS.drag documentation generated with JsDoc Toolkit
- drag and drop table rows
- movable div element can contain form elements, images and links
- forbidding or allowing table cells marked with class name "mark" (depends on "marked_cell" parameter)
- option to define exceptions and allow certain DIV elements to the marked table cell
- option to define single content cell on the table declared with "multiple" drop option
- cloning
- for unlimited cloning add "clone" class name to the div object
Hello World
- to limit cloning and transform last object to the ordinary movable object add 'climit1_X' class name
Hello World
- to limit cloning and transform last object to immovable object add 'climit2_X' class name
Hello World
- where X is integer and defines number of cloned elements (in previous examples, each climit will allow only 4 cloned elements)
- unlimited nested tables support
- dropping objects only to empty cells
- switch table content
- switching content continuously
- overwrite table cell content with dropped element
- shift table content
- table cell with "trash" class name becomes trashcan
- enabled handlers to place custom code on events: clicked, moved, not
moved, dropped, switched, changed, cloned, cloned end1, cloned end2,
not cloned, deleted and undeleted
- deleting cloned div if the cloned div is dragged outside of any table
- enabling / disabling dragging
- animation (move element/row to the destination cell/row)
- added support for touch devices (touchstart, touchmove, touchend)
How
redips-drag.js works?
Script will search for div elements (with class name "drag") inside
tables closed in
and attach onMouseDown event
handler. When user clicks with left mouse button on div element,
onMouseMove and onMouseUp handlers will be attached to the document
level.
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
mousemove events only when user holds left mouse button on div element.
As I mentioned, onMouseDown is defined on the elements you want to
drag. Elements beneath the dragged object will not be able to catch
onMouseOver event. Why? Because you are dragging object and that object
only can catch the onMouseOver event.
So, to detect destination table cells, script calculates all table
cell coordinates (with scroll page offset) and store them to arrays.
Arrays are searched inside onMouseMove handler and after left mouse
button is released, object will drop to the current (highlighted) table
cell.
In
redips2.tar.gz
(130KB) package you will find 24 examples including example of how to
save/recall table using PHP and MySQL. Package also contains and
redips-drag-min.js, a
compressed version of REDIPS.drag library.
Happy dragging and dropping!
Reference
KoolPHPSuite