Content of HTML table cells can be dragged to another 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 cell. Attaching onMouseOver handler on TD elements 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 TD positions, here is example that should work in FF3+, IE8+, Google Chrome 10+, 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. |
Version 5.0.6
Download redips2.tar.gz |
| You | can | not | drop | here |
|
Drag
|
and
|
drop
|
||
|
content
|
|
|||
|
with
|
||||
|
JavaScript
|
||||
 |
| Table2 |
and
|
|||
|
Drag
|
drop
|
table
|
||
|
|
||||
|
with
|
JavaScript
|
|||
| Table3 |
|
|||
|
Clone
|
||||
|
(1) Clone
|
(2) Clone
|
|||
|
|
Trash |
"Save" button will scan table content, create query string and send to the PHP page. Demo shows how to collect content and accept parameters on the server side. More about accepting parameters you can read at 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 the non empty cells or cells named with class "forbid". Table can contain rowspan / colspan TDs and different background color for every cell.
Here are minimal steps to enable content dragging in table:
- put <script type="text/javascript" src="redips-drag-min.js"></script> to the head section
- initialize REDIPS.drag library: <body onload="REDIPS.drag.init()">
- place table(s) inside <div id="drag"> to enable content dragging
- place <div class="drag">Hello World</div> to the table cell
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 TDs marked with class name "mark" (depends on "marked_cell" parameter)
- option to define exceptions and allow dropping certain DIV elements to the marked 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
<div class="drag clone">Hello World</div> - to limit cloning and transform last object to the ordinary movable object add 'climit1_X' class name
<div class="drag clone climit1_4">Hello World</div> - to limit cloning and transform last object to immovable object add 'climit2_X' class name
<div class="drag clone climit2_4">Hello World</div> - where X is integer and defines number of cloned elements (in previous examples, each climit will allow only 4 cloned elements)
- for unlimited cloning add "clone" class name to the DIV object
- unlimited nested tables support
- dropping objects only to empty cells
- switch cell content
- switching cell content continuously
- overwrite TD 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 <div id="drag"> 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 its "left" and "top" styles. 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 DIV element is dragged.
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 cell coordinates (with scroll page offset) and store them to the array. Array is searched inside onMouseMove handler and after left mouse button is released, DIV will drop to the current (highlighted) table cell.
In redips2.tar.gz (159KB) package you will find 27 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!
Hi Dd
how do you specify a number of cells to show? Example I want an 8x8 table show how do you do that? Also how do you fit an image in an 8x8? Thank you...
Pingback: Scrolling with Drag and Drop Table in Fixed Width DIV | BlogoSfera
I'm not find the uncompressed redips in this site, I don't know where I can find it
@Dusan - It should be possible to have more than one rowhandler in a row. I just replaced first row in example15 (Drag and drop table rows) with the following HTML. With this replacement, now is possible to drag row by clicking on circle (DIV element) in any TD:
<tr class="rl"> <td class="rowhandler"><div class="drag row"></div></td> <td class="rowhandler"><div class="drag row"></div></td> <td class="rowhandler"><div class="drag row"></div></td> <td class="rowhandler"><div class="drag row"></div></td> <td class="rowhandler"><div class="drag row"></div></td> <td class="rowhandler"><div class="drag row"></div></td> </tr>This is tested in Chrome and IE8 so I guess it should work in IE9 also. I'm glad you find REDIPS.drag useful - thanks for using it.
@Frank - Number of cells in a table are defined with HTML. Here is simple example of 3x3 table:
<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>... and did you try examples for table background image from the following link:
http://www.tagindex.net/css/table/background_image.html
Hope this could give you some directions.
@vic shang - redips2.tar.gz package can be download from the "Download" link below post title. Inside you will find compressed redips-drag-min.js file and well commented (verified with jsLint) source file.
Good evening and thanks for this very nice drag and drop post...
I have a question ...
Is it possible to update (through php) the object's new position?
I'd like to use this for a grid where quiz question numbers and quiz question rounds cross each other. So the first cell is the first question of the first round. After having dropped the object i'd like to save the new position. Where can I place the ajax event?
Thanks in advance for your time!
@lucio - Please download redips2.tar.gz package and in example03/ajax directory you will find modification of example03. Here is code snippet where you can see AJAX call in event.dropped():
// save - after element is dropped rd.event.dropped = function () { // get element position (method returns array with current and source positions - // tableIndex, rowIndex and cellIndex) var pos = rd.getPosition(); // save table content sendRequest('ajax/db_save.php?p=' + rd.obj.id + '_' + pos.join('_')); };sendRequest() and all other details are located in script.js file. This example is a good start point for your project.
Hi, do you know if it's possible to keep the column header always visible at the top of the page even if I scroll down ? I tried with position:fixed on my th elements but it doesn't work (all th are fixed on the top but they are all gathered on the first column...)
I also would like that my div element within a cell takes the whole td. For the moment, my div element doesn't take the whole space within my td.
Thanks for your help !
Hi, it's great, congratulations!
I'd like to ask if I can get these functions:
- Selection of cell ranges with drag (for large areas)
- Moving the selected area, maintaining the same geometry
- Connect to the database, for location update in db
Thanks in advance
@am - I have prepared and sent offline example to show fixed table header. It actually contains two tables (header table and content table). The trick is to scroll header table while user scrolls content table.
And regarding occupying whole TD cell, please see example24 (Table editor) where dropped DIV element is stretched to the cell width (just peek to the rd.event.droppedBefore event handler in example24/script.js).
@delfi - REDIPS.drag can only drag one DIV element at the same time. But you can create custom JS code like in example12 (select and move more elements) to move more elements at once. This demo doesn't have option to preserve initial geometry.
Saving table content to the database is possible. Please see example3 (school timetable) where timetable is saved to the MySQL database via PHP.
Thanks Bunic
Is there a function within redips to auto generate a table for you eg an 8x8 to fit an 8x8 image?
For instance I ran into a sutuation where a background table image is not fully shown in a table either an 8x6 or 8x8 using redips. Do you have an email I can email you my work so you can see what I mean. Something similar to this...http://www.quackit.com/html/html_table_generator.cfm
@Frank - REDIPS.drag is drag and drop library but REDIPS.table maybe could be helpful. Please see Merge and split table cells with JavaScript. The idea is to have minimal table and with "row" and "column" methods to expand table to 8x8. If you need to contact me, you will find my email address in "About" page.
