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 …

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.