JavaScript Drag and Drop example 6

33 thoughts on “JavaScript Drag and Drop example 6”

1. Darko,

   I want to use your drag and drop for generating math tests. I want to take specific asp pages which are questions and have the user drag and drop them with the snap to grid like your worksheet.

   Just like your example 6. Where I would have questions in “A” and drag them to a placeholder page next to it.

   Thanks,

   Tim

2. @Tim – Preparing demo with questions will not be a problem. First step is to place a DIV drag container and include tables (needed for grid).

   So, if you have some basic HTML skills, this will be easy task. Next, load REDIPS.drag library, place DIV elements and dragging will start to work.

   Any other “page logic” can be accomplished with using of event handlers. “Shool timetable” is a good example to see how to use event handlers.

   Just to mention, here is a list of event handlers (hooks):
   myhandler_clicked
   myhandler_moved
   myhandler_notmoved
   myhandler_dropped
   myhandler_switched
   myhandler_changed
   myhandler_cloned
   myhandler_clonedend1
   myhandler_clonedend2
   myhandler_notcloned
   myhandler_deleted
   myhandler_undeleted

3. Thx for that script. It works fine for me with a fix div-height. But with dynamic sizing of div/table-cells it would not use the single/switching/… dnd-restriction. In this case, it places more than one div-element in one table-cell and destroy the ordering of all other cells.
   I mean, thats a bug ;-)

   I was trying to use example 14 (sorting) with FF4 and no fix div-height.

4. @Chris – I’m preparing example16 with dynamic DIV height and I didn’t notice any problem. You can see the source on https://github.com/dbunic/REDIPS_drag … Anyway if you can send/show me the script with described bug I would be very grateful. Thanks!

5. Thanks for scripts and those are great. I started preparing a weekly planner (7 days) based on your example03 coding. I find it’s ok with safari and FF browsers but not with IE7.
   Cold you suggest me a remedy.
   Thanks

6. Hi, I was looking for drag and drop of rows and the tables. Is there anything that helps ?

7. Ex:
   Group One
   – Participant One
   – Participant Two

   Group Two
   – Participant Three
   – Participant Four

   Here I want to change the order of groups and also be able to drag the participants to other groups.

8. @ASilva – Your comment was somehow lost – sorry for a late reply to your question. Anyway, all REDIPS.drag examples are tested with IE8 browser. IE7/IE6 are no longer supported …

   @Nivedita – I think that exampe19 “Groups and table rows” from redips2.tar.gz package will best suit. Please download latest package and try. Hope this is what you’re looking for.
   Cheers!

9. Hi,
   Hope you are doing great, I have a problem in IE8. Problem is that the animation speed is very slow in IE8. This is happening only in IE8, In any other browser the animation is working fine.

   Please help me into this.
   Thanks In Advance.

10. @Vikas Saini – All examples in redips2.tar.gz are tested in IE8 and I didn’t notice any significant performance problems (small and medium size of tables). How big (I mean number of cells) are your HTML tables? Unfortunately, it seems that IE8 JavaScript engine wasn’t in focus when Microsoft designed IE8 browser. Comparing to other browsers, IE8 JavaScript engine is one of the slowest and I’m afraid there’s nothing I can do. I made a SunSpider benchmark and IE8 had 10x slower score then latest Google Chrome browser.

11. First off, let me say this is a very useful utility you have put together, thank you for your efforts and making this available to everyone!

    I wanted to add my thoughts to the issue discovered by Vikas Saini. I too have encountered this issue using IE9 and have a few thoughts they may help you track down what may be the cause. When I have a table with numerous rows that existed before the the “REDIPS.drag” object is intialized, the scroll perfomance is great!

    However, in my scenario, I add new elements to the table using the DOM and then make a call to the “enable_drag” method after each new element is created to enable the drag behavior. When I add elements using the DOM in this manner and make the call to enable_drag() the scolling perfomance degrades quite considerably after 20 or so new elements have been added.

    Anyway, that is my two cents. Perhaps this additional information will allow you to recreate the behavior described Vikas and myself.

    Thanks again for all your efforts, great tool!

12. @Eric – Thank you for tracking down performance issues in IE9. enable_drag() method only attaches / detaches onmousedown, ontouchstart and ondblclick events to DIV elements. Just one question, does your example contain scrollable DIV container (one or more) and does your enable_drag() call has set “init” parameter? If so, maybe the problem lays in multiple adding of event listeners to the DIV element … If you are familiar with DOM inspector you can peek to the scrollable DIV container and search for attached event listeners. Anyway, I will prepare “JS drag” example to see if this is the case.

    Your comment gave me the right direction where to look for the problem.
    Thank you once again.
    Cheers!

13. Hi
    I was trying to use your script with a jQuery but it doesn’t work. I have a fixed flash header with selection once the user choice flash passing parameter to the JavaScript

    function user_posts_profile(page) {
        $.get(control_page.php, {index_page:page}, function(data){$("#"+div1).html(data);});
    }
    

    So control_page.php according to the choice of the user will change the middle (div) only …
    I use some of your examples as test for two pages

    I can see all the formats of any example but I can’t drag any row or object … I use example19 and example3
    All the example will dump inside (DIV) because this is the rule of jQuery. Is this the reason ? That your drag DIV can’t be recognized?

    This is control_page.php file:

    if (isset ($_GET["index_page"])) {
        $index_page= $_GET["index_page"];
    }
    else {
        $index_page = 1;
    }
     
    if ($index_page == 1) {
        include("example19.php");
    }
    elseif ($index_page == 2) {
        include("example3.php");
    }
    elseif ($index_page == 3) {
        include("block_teachers.php");
    }
    elseif ($index_page == 4) {
        include("block_student.php");
    }
    

14. @tamer Suliman – Maybe the problem is related to REDIPS.drag initialization. After example19 or example3 is loaded, drag container should be initialized to enable DIV dragging. REDIPS.drag.init() will actually attach event listeners (for onclick event) to the DIV elements. If DIV element doesn’t respond to the onclick event then init process didn’t collect all DIV elements within drag container and attach event listeners.

    REDIPS.drag and jQuery (or any other JavaScript framework) should work on the same page without collision beacuse each of them is encapsulated inside its own name space. If you have online example to show, I will gladly peek to the code and try to help.

15. Hello Mr. dbunic

    I was trying to check what you said, so I added this line at the top of the example:

    <script type="text/javascript">REDIPS.drag.init()</script>
    

    So it works .. I can drag now the rows .. but there is other problem.

    For example 19

    I was able to drop all the rows and groups

    For groups it is doing well

    But if I dragged a row inside a group to other group it didn’t dropped inside it , it become outside as if a new group instead of to be added inside ?

    I try to trace the error so I add a (alert) statement inside the (redips-drag-min.js) file at the beginning of this script

    row_drop=function(r_table,r_row,table_mini) 
    alert ("table="+r_table+"-r_row="+r_row+"-table_mini="+table_mini);
    

    to check what is going on when I drop the row , I found out that table=0 ,row =3 or any other value and table_mini = undefined

    ===============
    sorry for disturbing but I am trying to do something easy to help teachers using drag drop tool for building an exam

    so to fill the all questions data from (grid I wrote the code to make each row on it can dragged and it succeeded) I want to control and do some validations ( like the question has to be add one time only also I have to read the new arrangement of the groups ) all of this has to be red within dropping each row or group

    so how i can catch the dragged div data ?

16. sorry I am not good in English :) I hope that you can understand what I wrote in my last message :)) … ( So I am asking you to correct my English also not only my code :) )

17. @tamer Suliman – All tables should be closed within DIV id=”drag” container. You can make visible DIV container to be sure. Inside redips2.tar.gz package is source and minimized lib version. In case of debugging, use redips-drag.js instead of redips-drag-min.js so errors will be much easier to track and correct (source is well commented).

    The trick in example19 is to enable/disable tables depending on which row is dragged. For example, if “group row” is dragged then inner tables will be disabled (like invisible for REDIPS.drag lib). On the other hand, when inner row is dragged, then “main table” will be disabled.

    Here is event listener code that toggles tables (“view tables” contain inner rows):

    // row was clicked - enable / disable tables
    rd.myhandler_row_clicked = function () {
        // find table
        var tbl = rd.find_parent('TABLE', rd.obj);
        // if row belongs to the "main" table
        if (tbl.className.indexOf('main') > -1) {
            rd.enable_table(false, 'view');
            rd.enable_table(true, 'main');
        }
        // row belongs to the "view" table
        else {
            rd.enable_table(true, 'view');
            rd.enable_table(false, 'main');
        }
    };
    

    In your case is possible that all tables are disabled and REDIPS.drag can’t drop row to any table – and that’s maybe why row is dropped somewhere outside.

18. Hello,

    excuse my poor english, i’m a french!!

    I try to combinate horizontal scrollable DIV and cells restriction with “only”. It works for all the cells who are display at the open of the document. But if i scroll my div on the right it didn’t work. The function set_trc returns the wrong cell_current.className, it returns the className of the (hidden) cells who are on the left of the div.

    Could you help me?

    Thanks In Advance.

19. @GerardBaste – set_trc() method sets current table, row and cell below dragged DIV element. This is one of the core methods in REDIPS.drag library. So, if you slide scrollable DIV container to the right then error in set_trc() method will appear. If so, can you please prepare small demo in ZIP and send me attached in email? It’s important that I can repeat this error from your example (to be able to fix the problem). Thank you.

20. Hello dbunic. Thanks for your answer. I solved my problem with a correction of set_trc(). I changed the following line:

    if (currentCell[3] <= X && X <= currentCell[1]) {
    

    with

    var PosAcScroll = X + tables[table].parentNode.scrollLeft;
    if (currentCell[3] <= PosAcScroll && PosAcScroll <= currentCell[1]) {
    

    and it’s OK now….but I have a new problem! When I drag a cell to another one with the “good” only the cell is highlighted, it’s OK. But when my drag cell go out of this target cell or out of the table, the cell is always highlighted. Worst, I’m out of the cell but when I released the button the drop is done. Can I change this? I’m sorry but I can’t send you any demo of my intranet application.
    Thanks in advance.