JavaScript Drag and Drop example 2

This post shows how to use REDIPS.drag library described in my previous post Drag and drop table content with JavaScript. HTML table is stylized to have left column with content, main table and message line. Elements on the left side (green and orange) should be placed to the coloured table cells. After elements are correctly sited, appropriate message will be displayed. Please try …


REDIPS.drag example02

Now follows HOWTO. First step is to include drag and drop library from redips2.tar.gz package. Package contains source code (well commented) and compressed file redips-drag-min.js ready for production.

<script type="text/javascript" src="/my/redips-drag-min.js"></script>

And the second step is to initialize / configure REDIPS.drag library. Only initialization is mandatory (other properties will have default values). You can see how to define destination table cells for green and orange elements. It’s possible to define destination cells for each dragged element. At the beginning, left column contains green and orange elements with id=”green” and id=”orange”. This elements are defined to clone two elements. Cloned elements will get id greenc0 / greenc1 and orangec0 / orangec1.

window.onload = function () {
    var num = 0,          // number of successfully placed elements
        rd = REDIPS.drag; // reference to the REDIPS.drag lib
    // initialization
    rd.init();
    // set hover color
    rd.hover.colorTd = '#9BB3DA';
    // define green elements for green cells
    rd.mark.exception.green = 'green_cell';
    rd.mark.exception.greenc0 = 'green_cell';
    rd.mark.exception.greenc1 = 'green_cell';
    // define orange elements for orange cells
    rd.mark.exception.orange = 'orange_cell';
    rd.mark.exception.orangec0 = 'orange_cell';
    rd.mark.exception.orangec1 = 'orange_cell';
    // this function (event handler) is called after element is dropped
    rd.event.dropped = function () {
        // message text
        var msg;
        // if the DIV element was placed on allowed cell then 
        if (rd.td.target.className.indexOf(rd.mark.exception[rd.obj.id]) !== -1) {
            // make it a unmovable
            rd.enableDrag(false, rd.obj);
            // increase counter
            num++;
            // prepare and display message
            if (num < 6) {
                msg = 'Number of successfully placed elements: ' + num;
            }
            else {
                msg = 'Well done!';
            }
            document.getElementById('message').innerHTML = msg;
        }
    };
};

REDIPS.drag library contains 31 event handlers for placing custom JavaScript code (please see documentation for details):

  1. event.changed
  2. event.clicked
  3. event.cloned
  4. event.clonedDropped
  5. event.clonedEnd1
  6. event.clonedEnd2
  7. event.dblClicked
  8. event.deleted
  9. event.dropped
  10. event.droppedBefore
  11. event.finish
  12. event.moved
  13. event.notCloned
  14. event.notMoved
  15. event.shiftOverflow
  16. event.relocateBefore
  17. event.relocateAfter
  18. event.relocateEnd
  19. event.rowChanged
  20. event.rowClicked
  21. event.rowCloned
  22. event.rowDeleted
  23. event.rowDropped
  24. event.rowDroppedBefore
  25. event.rowDroppedSource
  26. event.rowMoved
  27. event.rowNotCloned
  28. event.rowNotMoved
  29. event.rowUndeleted
  30. event.switched
  31. event.undeleted

In this example you can see how to use event.dropped() event handler and how to test if element is dropped to the allowed table cell. Example also shows how to define single content table cell on the globally defined “multiple” drop mode. Single content cells are in the corners of the main table, while “multiple” is default mode and it hasn’t be defined explicitly. Hope this post will give some ideas of how to use REDIPS.drag library.

24 thoughts on “JavaScript Drag and Drop example 2

  1. Hello Guys, I need some help from you. I am in the process of creating the layout for the restaurant (2 seats, 4 seats, 6 seats and 10 seats). I should give an option to the restaurant owner to create the layout using the drag and drop option as part of the sign-up process. Please help if there is anything source code /snippet available to accommodate my requirement.

    Truly appreciate your help.

  2. @Rama – Please see all examples in the redips2.tar.gz package (currently, package contains 27 examples). Hope you will find the closest example for your case and that can be the start point for development.

    And just for a note, package with source code and all examples can be downloaded from a link below post title.

  3. Looking at example 23
    When an entry has been dropped into the cart, can that item have it’s background color changed so you know it’s been added.

    ie: I drop Item01 to the cart, Item01’s background in the main list (not the cart) should have it’s background changed.

    Thanks :D

Leave a Comment