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 target cell. Attaching onMouseOver handler on TD elements will not work, because browser doesn’t fire events to the elements below the dragged object.
Anyway, after taking care of the current scroll position and calculating TD positions, REDIPS.drag should work in recent major browsers like Google Chrome, Firefox, Safari, Internet Explorer, Opera and mobile devices as well. Click on image below, will open live demo where you can drag green, blue or orange bordered DIV elements, change properties (radio button and check-boxes) and click on “Save” button.
Download latest version redips2.tar.gz
REDIPS.drag example01
In this example “Save” button will scan table content, create query string and send to 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 “redips-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). Library has built in autoscroll and option to forbid landing to non empty cells or cells named with class “redips-mark”. 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=”redips-drag”> to enable content dragging
- place <div class=”redips-drag”>Hello World</div> to the table cell
Other features of REDIPS.drag library:
- methods and data structure are defined in namespace (easier integration with other JS frameworks)
- all JavaScript code is checked with ESLint
- REDIPS.drag documentation generated with JsDoc Toolkit
- drag and drop table rows
- movable DIV element can contain other HTML code (images, forms, tables …)
- forbidding or allowing TDs marked with class name “redips-mark”
- 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 “redips-clone” class name to the DIV object
<div class=”redips-drag redips-clone”>Hello World</div> - to limit cloning and transform last object to the ordinary movable object add ‘climit1_X’ class name
<div class=”redips-drag redips-clone climit1_4″>Hello World</div> - to limit cloning and transform last object to immovable object add ‘climit2_X’ class name
<div class=”redips-drag redips-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 “redips-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 “redips-trash” class name becomes trashcan
- enabled handlers to place custom code on events: changed, clicked, cloned, clonedDropped, clonedEnd1, clonedEnd2, dblClicked, deleted, dropped, droppedBefore, finish, moved, notCloned, notMoved, shiftOverflow, relocateBefore, relocateAfter, relocateEnd, rowChanged, rowClicked, rowCloned, rowDeleted, rowDropped, rowDroppedBefore, rowDroppedSource, rowMoved, rowNotCloned, rowNotMoved, rowUndeleted, switched 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 works?
Script will search for DIV elements (with class name “redips-drag”) inside tables closed in <div id=”redips-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 package you will find many 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 (compressed with Google Closure Compiler).
Happy dragging and dropping!
Hey
I am having a problem with drag and drop. My code works fine on IE. I have used java script in my PHP program. But when I open the site on firefox or safari boom!!! my drag and drop does not work. I am trying to drag small colors to different various schemes and place it on boxes in a calendar and not successful. Can anyone please, please help me:( Thx in anticipation :)
@uali – If you can show problematic example, we will help you.
@Dilip – It will be much easier if you can send / show example … I admit that my Drag and drop library isn’t perfect, but through cases like this I will try to fix problems. Thanks!
@tan – Highlighting should work on span cells – vertically or horizontally. Please show me the problem and I will try to fix possible bug.
@beatle – That’s odd. Drag and drop library is primarily tested on FireFox3 and Google Chrome (I have Fedora on my desktop). Please show me your work and I will test it with FF … Thank you.
Hi Dbunic,
I am using your library for my project, everything works like magic. Thanks a lot for this marvelous script!!! Just one last thing my project is left. i.e. while using the scrollable divs for both the left and right divs. Whenever I want to drag something after scrolling the div neither the left div’s cells are calculated properly nor the right div. I tried the the solution which you gave to @newhere, but it didn’t do any good. I am using IE8. I tried to calculate the correct scroll position of the right div using the following code, but could only get the start position of drag object in right div not the drop cell.
if (t != null) {
scrollDiv = t.parentElement;
if (scrollDiv != null && scrollDiv.scrollLeft != null) {
var scrollDivX = scrollDiv.scrollLeft;
if (parseInt(scrollDivX) > 0) {
scrollX += scrollDivX;
}
}
if (scrollDiv != null && scrollDiv.scrollTop != null) {
var scrollDivY = scrollDiv.scrollTop;
if (parseInt(scrollDivY) > 0) {
scrollY += scrollDivY;
}
}
Please help me out of this issue!!
Thanks A lot!!!
@Vikram – Just one quick question … did you attach onscroll event to the scrollable DIV in REDIPS.drag.init()? Something like:
document.getElementById(‘right’).onscroll = calculate_cells;
This is needed to recalculate cell positions after DIV was scrolled – as I advise to @Newhere …
Hi Dbunic,
I am using your script.Its great.I have same problem as Newhere4 ,scrollable div.I made changes that you suggested.It is working fine.
But my problem is scrolling became very slow.My table have huge no of cells so I have to scroll many a times
Is there any other solution for this
Hi Dbunic,
Thanks a lot for looking into my question!
I have made the calculate_cell function as public function and I have something like this
onscroll=”adjustScroll();REDIPS.drag.calculate_cells();” while defining the div. As I am using stickyheaders for the div, that’s why I needed one more function.
And yes the calculate_cells is been called when I scroll the div.
Looking forward for your reply
Thanks,
Vikram
Hi Dbunic,
Waiting for u r reply.I am detailing my problem.Belo is my code
table content dynamically loaded…….
In this case dragging a cell which is on top to the end of the table is very difficult.
I am doing following actions:
Click the required cell hold the left button of the mouse and scroll the div using mouse middle button(scrolling div with mouse middle button is very time taking) and then drop.
Pls let me know if there is any other way to scroll( with out using mouse middle button).
Is auto scrolling possible(when ever I drag the object down or right it should move automatically with out using mouse scroll button)?
Thanks in advance!!!
Sorry code is missed
div id=”drag”
div id=”right” style=”position:relative;width:1150px;height:500px; overflow:scroll
table
table content dynamically loaded…….
end of table
I have nested tables and am not having any luck. Is there anything special I need to take into consideration?
Thanks!
@Vikram & @amu – Guys, I’m working on scrollable DIV support and IE8 driving me crazy. Please give me few days and I hope code will be fixed next week.
@Andrew – Nested tables in deeper hierarchy are ignored. Only top tables under DIV id=”drag” will be processed. So, you can place another table into dragging element without worry to confuse the script.
Hi Dbunic,
I have made some changes in your script and my problem is resolved.
First i added code in getScrollPosition function to get the scroll position of the div.(from the previous comment)
Second added calculate_cells function call on myhandler_moved.(i removed the call to calculate_cells on scrolling, maybe this can fix the issue of slow scrolling for @amu)
Third, commented if statement at line 412
// set current table, row and cell if mouse pointer is inside div id=drag but out of the current cell (spare CPU)
if (evt.clientX div_box[3] &&
This has got me going but i am not sure it is a good solution or not.
Please give some comments on this.
Thanks!
@Vikram – I’m glad you’ve manged to fix the problem. In the meanwhile I made support for scrollable DIV containers. Please see example5 in the package. It still doesn’t have autoscroll option so that will be the next upgrade. Anyway, solving overflow:auto and releasing left mouse button outside a window for IE was a real fun ;)
Hi Dbunic,
Really cool stuff man!!! pure magic…
Thanks a lot again for wonderful script.
looking forward for auto-scroll functionality.. :-)
Thanks,
Vikram
Please I have a problem only I can moved the div where I haven´t more of 6 columns If i a have more columns not move the data.
Hi Dbunic,
Thanks for ur scrollable div..I am facing one problem.
Everything is working fine but
1)when I am scrolling the scroll bar with mouse left button,scrolling is very slow .But in example5 I am able to scroll properly..
My table nearly contains 200 rows, to move to a particular row I have to scroll to the required position.But since scroll is very slow I am not able to reach required row properly
2)Previously, even after selecting any cell with mouse left button ,I am able to scroll using mouse middle button but now I am not able to do that
Following changes I made to my code.
1) I replaced old drag.js with example5 drag.js
my code is:
div id=”drag”
div id=”right” style=”position:relative;width:1150px;height:500px; overflow:scroll
table
table content dynamically loaded…….
td div id=”jkl” class=drag t1 endof div
end of table
Looking forward for your reply,
amu
sorry!!! in the first point it is not mouse left button it is mouse middle button
Hello,
nice work!
But i am facing a problem with IE, maybe you can help me out.
This only appears on IE 6 and 7. Firefox and IE8 are doing fine.
I got a real simple table with 2 elements(div) in it. If i start dragging on the most bottom edge of the div, i get an error, because the x/y position did not seem to fit on the table offsets. I tried adding/editing some styles (like padding and so on) but nothing seem to fix it. If i just click more centered everything works fine.
Does this sound familiar to you or you got any idea what i am missing/did wrong?
Thanks in advance.
Where can i get the code for the above? Where is drag.js?
Great script!
Any idea why my textarea inside a dragable div is not editable??
Thanks for the script!