REDIPS.drag was initially built to drag and drop table content. After publishing first version of REDIPS.drag, I received a lot of questions about dragging table rows also. Now is possible to drag and drop table rows as well as table content. First column and contained DIV element in this demo is a row handler, so you can try to drag table rows.
It is very easy to define a row handler. Actually, it is only needed to place DIV element to the column (first, last or any other) and to define class=”drag row”. This DIV element will become a row handler. When row dragging begins, source row will change color and content will become transparent. This way, source row as start point is visible and obvious. It is possible to return row to the start point – in this case, event.rowDroppedSource() will be fired. In a moment when row is dropped to the destination table, source row will be removed. How REDIPS.drag works? The trick is to clone a mini table from the source table and to remove all rows except selected row. It looks like a row, but it is a table with only one row – a mini table. New functionality also brings new event handlers:
- event.rowChanged
- event.rowClicked
- event.rowCloned
- event.rowDeleted
- event.rowDropped
- event.rowDroppedBefore
- event.rowDroppedSource
- event.rowMoved
- event.rowNotCloned
- event.rowNotMoved
- event.rowUndeleted
Each event handler has access to the obj and objOld objects. For example, event.RowClicked() sees only obj object and this is reference to the source row. event.rowMoved() is fired in a moment when dragging starts and in this case, obj is reference to the mini table (previously mentioned) while objOld is reference to the source table row.
REDIPS.drag has a new method: rowOpacity(el, opacity, color) to change color and opacity of the source row and mini table. This way it is only needed to call rowOpacity() method in event handlers to have row effects like in this demo. Here is code for event.rowMoved() used in this demo:
rd.event.rowMoved = function () {
// set opacity for moved row
// rd.obj is reference of cloned row (mini table)
rd.rowOpacity(rd.obj, 85);
// set opacity for source row and change source row background color
// rd.objOld is reference of source row
rd.rowOpacity(rd.objOld, 20, 'White');
// display message
msg.innerHTML = 'Moved';
};
REDIPS.drag takes care about background color of table cells and table rows. When dragging begins, color of each table cell is saved to the array and returned in a moment of dropping or highlighting current table row. Source code of REDIPS.drag library with examples can be download from “download icon” below post title. If you want to see more drag and drop examples based on REDIPS.drag, click on Drag and Drop category.
Happy dragging and dropping!
@George – Unfortunately in current REDIPS.drag version is not possible to drag table columns. Only DIV elements and table rows are enabled for dragging.
As information, we are attempting to drag rows between two tables. We are encountering a problem with dragging rows when the table contains <thead> and <tbody> tags. Specifically, we receive the error: “NotFoundError: Node was not found” when releasing the mouse button. However, when the <thead> and <tbody> tags are removed it appears to work as expected.
Is there an easy work around for this?
@Gregg Kelley – Please try latest version 5.0.8 just pushed to GitHub:
https://raw.github.com/dbunic/REDIPS_drag/master/redips-drag-min.js
If it will be OK, than I will prepare package. Now should be possible to have THEAD and more TBODY table sections. Thanks!
This works great. Thanks a lot dbunic!
Thank you very much for your effort, greate work…
Hello, this works great. However, there is one thing I cannot find in the documentation and I was wondering if you could tell me how to accomplish this.
I have four tables, where I need tables 1 and 2 to be draggable between each other, and the same for 3 and 4. I have it set up using “mark” to keep individual cells from crossing between 1/2 and 3/4. However, I cannot find how to keep draggable ROWS from being able to cross between 1/2 and 3/4. I want to be able to move a row around table 1, but not allow it to move over to table 3.
Thanks!
Hi there!
I need to draw table like this, but to update it from data in mysql table.
How to pass it to js like in this sample?
thanks
Eli
@Adam Taylor – If you need to group tables maybe you can wrap it in separate drag containers. Please take a look to the Example 8: “Tables in separated containers”. Hope it will be helpful.
@Eli Kore – REDIPS.drag is a client side library. It allows dragging DIV elements across one or more tables. Initially, HTML table can be generated with PHP, ASPX or any other server side script. In redips2.tar.gz package you can find Example 3: “School timetable” where is presented idea how to save (and restore) table content. Saving to database is started on button click. In sub-directory is modified version where each DIV move is saved automatically after element is dropped to the table. Example is well commented so it should not be a problem for further modification and customization for your needs.
Thank you very much sir.
Today i learn so many things . I request can you explain this in video form . I try to find this examples in video form but i didn’t find it .. so can you please put a video for explaining all this..
Hello, this is awesome. i was trying to make a copy of a row instead of removing a row from source table. i could not find this, Could anyone help me on the same. Thanks.
Hey – congrat for the wonderful job on REDIPS.drag.
Just noticed that moving a row removes all events attached to the elements in the row. Is that normal?
Hello,
I try to add a new row, but only the first row is draggable. Could you help me on the issue. 3Q~
http://jsfiddle.net/YurHw/
@srikanth – I’ll try to create new videos in the next period when I’ll have some free time. Thanks for your feedback.
@Manoj – Please see example20 “Clone and delete table rows” where table row can be cloned with pressed SHIFT key. In this example, table rows can be moved and cloned.
@David – Cloning node (like TR) in DOM is done with cloneNode() and it doesn’t copy event listeners added using addEventListener(). So, direct answer to your question is yes, this is expected behavior. Here are two links with detailed explanation of cloneNode() and event listeners that might be helpful:
https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode
http://stackoverflow.com/questions/15408394/how-to-copy-a-dom-node-with-event-listeners
@tide – I have prepared jsFiddle update and it works fine now. Just search for “dbunic” keyword in the comments to see what is changed. Hope this will help you to continue with your project. Here is URL for the last update:
http://jsfiddle.net/YurHw/4/
Hello,
Thanks for your help. I have one more question about event handler.
After event.rowDropped is triggered, the jQuery.onClick event becomes failed. However, event.dropped doesn’t affect jQuery.onClick. Can your help me on the issue? Maybe it is misunderstanding of jQuery.
http://jsfiddle.net/bN3hP/5/
@tide – Here is result with fixed event listener after row is dropped:
http://jsfiddle.net/bN3hP/10/
The trick is to attach it on every row drop. Just search for “dbunic1” keyword and you will see how this patch is applied. I would also advise to create one event handler method and to call it on every needed place (instead of copy&paste).
Cheers!
Dear Darko,
I’m impressive with your work. I was searching in google and then I found your site, Currently, I’m learning about HTLM5/Javascript. I want to drag div elements (cloning), but the dropzones must accept just once every draggable div element (no multiples copies of one element)
http://jsfiddle.net/VtvE6/12/
I got 2 problems trying to do it:
1.- I can copy only 1 element (I can not copy the other element)
2.- I get overflow of this cloned element
Could you give me some help?
I’d appreciate it
@Fabian – I can help you directly if you have a problem related to REDIPS.drag library. This lib should be useful in case of drag&drop functionality in HTML table (one or many). Your jsFiddle example is based on new HTML5 drag&drop and this is beyond of REDIPS.drag scope (for now). My/this reply can be considered as open request to anyone who can and is willing to help. I will support any comment that will be posted as help for your question. Cheers!
Thank you anyway Darko for your reply and keep up the good work
@Fabian – Thanks for understanding and wish you all the best for Xmas and New year.
@dbunic your tool for drag-drop between tables is exactly what I need for my web-app. I have a 200+ row table which I can filter, sort etc. but eventually I’d like to be able to drag rows from this scrollable table to a smaller table on the right.
I have installed and followed as much instruction as I can find and have the cells showing up as ‘dragable’. If I do not scroll down the main table the drag works as expected. Unfortunately, when I scroll down a little and attempt another drag, firstly, the contents of the cell jump to the bottom of my browser and can only move left and right and secondly, the highlight for dropping is not where my mouse is pointed. Clearly I have missed something but can’t work out what it might be.
One other question, is there a way to block dropping onto the same table? (i.e. force the drop to be in an alternate table?)
Thanks for publishing this great tool!
MikeF