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.
| Table 1 | |||||
|---|---|---|---|---|---|
|
Drag
|
|||||
|
and
|
drop
|
table
|
|||
|
rows
|
with
|
REDIPS
|
|||
|
lib
|
|||||
| Message line | |||||
| Table 2 | |||||
|---|---|---|---|---|---|
|
Drag
|
rows
|
||||
|
and
|
table
|
||||
|
drop
|
|||||
| Message line | |||||
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, myhandler_row_dropped_source() 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:
- myhandler_row_clicked
- myhandler_row_moved
- myhandler_row_notmoved
- myhandler_row_dropped
- myhandler_row_dropped_before
- myhandler_row_dropped_source
- myhandler_row_changed
- myhandler_row_cloned
- myhandler_row_notcloned
- myhandler_row_deleted
- myhandler_row_undeleted
Each event handler has access to the obj and obj_old objects. For example, myhandler_row_clicked() sees only obj object and this is reference to the source row. myhandler_row_moved() is fired in a moment when dragging starts and in this case, obj is reference to the mini table (previously mentioned) while obj_old is reference to the source table row.
REDIPS.drag has a new method: row_opacity(el, opacity, color) to change color and opacity of the source row and mini table. This way it is only needed to call row_opacity() method in event handlers to have row effects like in this demo. Here is code for myhandler_row_moved() used in this demo:
rd.myhandler_row_moved = function () {
// set opacity for moved row
// rd.obj is reference of cloned row (mini table)
rd.row_opacity(rd.obj, 85);
// set opacity for source row and change source row background color
// obj.obj_old is reference of source row
rd.row_opacity(rd.obj_old, 20, 'white');
// display message
msg.innerHTML = 'Row 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!
Hello,
When i use Example 16, there is a left div and a right div,
when i put a draggable div in the right part, in a table cel (with html) like:
ns1.2a
its invisble. So i tried putting ns1.2a
No luck.
Tried examining your other examples to see what could be the problem - but this seems to work in other examples.
Could you please explain how i can put a draggable div inside a cell in the "right" container with html
Best Regard,
Ugur
@Ugur Yilmaz - The example16 is somehow specific comparing to other examples in package. In the moment when DIV element is dropped to the right section, AJAX call is executed to fetch the content of DIV element. Inner HTML of DIV element is overwritten with content from AJAX response. If you test this example localy, there can be a problem as you discribed. You can either test example16 from your local web server of you can see it in action from Preview link below post title.
Pingback: JQuery by zoheb - Pearltrees
hi dbunic is there event to cancel the drop like you did
in regular cell - return false myhandler_dropped_before .
because i didnt find .
@oded - Version 4.6.6 is published today with implemented myhandler_row_dropped_before() event handler. Just return false from this method and row drop will be canceled. Cheers!
work like a charm ! 10 x
Hi, I use this tool for about a year, is very useful!
But I've a little problem: there is a tag in a cell and his value is loaded from database.
At onblur event I save new textarea value. But when I drag table row textarea returns the value equal to the previous.
Is there a way to update table content?
p.s. sorry for the english, I'm italian
@pat - So, you have TEXTAREA element in table cell and in a moment of dragging row its content is returned to previous value? I placed simple TEXTAREA in example15, changed content, dragged and didn't notice such a problem. Maybe "onblur" registred event in your page is fired twice and replaces TEXTAREA content. It will be much easier if you can prepare example to show unwanted behaviour ... And your english is just fine - I'm your neighbour from Croatia
Thanks,
probably there was a script version problem. I've uploaded the last redips-drag-min.js and changed something for using a "groups and table rows" (example 19) and now it works very well!
Can I have more than one main table side by side and drag rows between them?
Thanks
@pat - Placing tables side by side should be possible. Please see Example 3: School timetable (static) where tables are placed in "left" and "right" DIV containers and styled with float to left ... and I'm glad you solved previously mentioned issue.
Hi,
First let me say, this is a wonderfull library. I'm currently playing around with it, but I still have a question. When will column dragging be introduced officially? Is it possible to use a temporary 'hack' to introduced it?
@Arevico - Column dragging is in my plans and I hope it will be implemented during this year. It's a bigger code modification so I need more time. But unfortunately, we have finishing phase of main project on my full time job - and it's a quite time-consuming. I'm not sure I can make a quick hack to allow correct column dragging functionality. Element/row dragging logic is dispersed across the code so modification is not easy. Sorry if this doesn't sound nice, but I've tried to be honest. Thanks!
Damn good work, dbunic. Well done.
I was almost giving up on a small app I want to develop when I stumbled on this and it may actually do the trick. Some questions, though:
1. Is the cell content editable?
2. Can I use the cell to set variable, so I can make calculations like a spreadsheet?
Thank you a lot for this!
Hi Zax! I'm glad you like my work. Here are answers to your questions:
1)
TD element can contain form elements like input boxes or textarea - if needed. Or you can prepare your own utility JS function to change innerHTML property of TD element. So, speaking generally, yes cell content can be editable.
2)
If you want to store some numerical values to the table cell (that will be hidden), maybe you can use input elements like:
Drag and drop DIV elements to such table cells should not affect or delete INPUT elements. It depends of what you want to achive there may be other solutions like storing values to the class name, using JavaScript array for each table cell and so on.