JavaScript Drag and Drop example 2

This post shows how to use REDIPS.drag library described in 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 colored table cells. After element is 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 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 is also 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.

// create redips container
let redips = {};

// redips initialization
redips.init = function () {
    let num = 0,           // number of successfully placed elements
        rd = REDIPS.drag;  // reference to REDIPS.drag lib
    // set reference to message HTML elements
    redips.msg = document.getElementById('message');
    // initialization
    rd.init();
    // set hover color
    rd.hover.colorTd = '#9BB3DA';
    // define "green" class name as exception for green cells
    rd.mark.exceptionClass.green = 'green-cell';
    // define "orange" class name as exception for orange cells
    rd.mark.exceptionClass.orange = 'orange-cell';
    // event handler called after DIV element is dropped to TD
    rd.event.dropped = function (targetCell) {
        let divClass = rd.mark.exceptionClass, // DIV exception class
            text;
        // if the DIV element was dropped to allowed cell
        if (targetCell.className.indexOf(divClass.green) > -1 ||
            targetCell.className.indexOf(divClass.orange) > -1) {
            // make DIV unmovable
            rd.enableDrag(false, rd.obj);
            // increase counter
            num++;
            // prepare message
            if (num < 6) {
                text = 'Number of successfully placed elements: ' + num;
            }
            else {
                text = 'Well done!';
            }
            // display message
            redips.msg.innerHTML = text;
        }
    };
};

// add onload event listener
if (window.addEventListener) {
    window.addEventListener('load', redips.init, false);
}
else if (window.attachEvent) {
    window.attachEvent('onload', redips.init);
}

REDIPS.drag library contains many 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 located in corners of main table, while “multiple” is default mode and it hasn’t be defined explicitly.

25 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

  4. Hi,

    I’m using redips2 in an angularjs project. I’m facing an issue.
    The redips 2 table works fine in my chrome browser but doesn’t works in my chromium browser. Moreover, it is not working in the chrome browser in my colleague system.
    Any help would be appreciated.

    Thanks & Regards

Leave a Comment