D4mations.com

Drag and drop table content with JavaScript



Video shows content of redips2.tar.gz package and how easily content of HTML table can become drag-able. JavaScript source code is verified with JSLint and well commented. REDIPS.drag library has built in custom event handlers to execute code before element is dropped, cloned, moved, deleted … For more details please visit http://www.redips.net/javascript/drag-and-drop-table-content/

Original source

d4mer

, , , , ,

19 responses to “Drag and drop table content with JavaScript”

  8. I thank you much on your response. I think your an awesome programmer. This javascript you wrote is top notch professional and I like the music touch.

    I'm not too crazy about the JQuery. I like Javascript along with PHP. I'd like to use your website and examples as guides into my own interactive web applications.

    Thanks Darko,

  9. After DIV element is dropped to the cell, it's possible to place custom JS code inside event handler REDIPS.drag.event.dropped() and to call getPosition() method. You can find code snippet and info on documentation page of redips.net site. Just click on "Documentation" link below post title.

  12. @Allan – The main intention of this video is to demonstrate how library works so future users could have a picture of what REDIPS.drag library is. So, this video is a demo, not tutorial.

    Anyway you are right, my future videos (no matter will they be demo or tutorial) will contain speech and I will try to explain what I'm doing.

    Thank you for feedback.
    Regards

  13. don't u get it…when u make a tutorial and put music on it, some people would say sarcastically 'what the name of that song'
    cause its a dam fucking tutorial so don't put music on it, speak, say something but do not put any music on it…

    that's been sayd, good vid after all.

  14. @14xxx05 – Here is short scenario how REDIPS.drag works. When user clicks on DIV, mousemove event on DOM document is registered. Along with moving mouse pointer, DIV styles "top" and "left" are calculated so it looks like DIV is dragged (REDIPS.drag also calculates current TD below mouse pointer). After mouse button is released, mousemove event handler is unregistered and DIV element is dropped to the current table cell. Hope this lines will help you to build your own drag-n-drop solution.

  15. @karn00maccom – Table content (in this case DIV elements) can be placed only to one table cell. But you can clone DIV elements in a moment of dropping (using myhandler_dropped event handler) like in example03 – School timetable. Anyway, in the meantime I added new feature "dragging table rows" in REDIPS.drag library. Please search for my recent videos to see how dragging table rows works. Cheers!

Leave a Reply