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”

  4. Hi,

    love this example. How would you edit this code so that the dragabble element can be cloned an infinite number of times?

  6. Hi…I have use your Example work very Well….But only one feature reuired is tht the controls of the two adjacent should be swapped …

    Suppose i have table with column 2 and i drag coloumn2 element to column1 thn both should swapp there position..

    Plzzz Help me out with this …..

  8. If I understood your question you want to know how script finds (highlights) current table cell position. Well, position of dragged element is compared with stored informations of table cell bounds. In the initialization phase, script scans tables and creates array with row positions. It wasn’t possible to attach onmouseover event handler to the table calls because events weren’t never activated. Dragged element took onmouseover event for himself. Anyway, after applying “array” logic, REDIPS.drag library works pretty good.
    ;)

  9. Hi, if I want to change background color to another color like red or green, when I drag to the green cell or orange cell?

  10. hi, i need the simple example of drag and drop the colors or arranging the alpha

  11. @arzozeus – In a moment when element is dropped to the table cell, you can write a code in myhandler_dropped() to change background color of target table cell. target_cell reference is defined in onmouseup and visible in myhandler_dropped() event handler.

    @shashi – Can you give me a little more details about color example you need. Alpha component of DIV elements in this example is defined in CSS:

    opacity: 0.7;
    filter: alpha(opacity=70);

    If this is what you’re looking for …

  12. Hi!
    I found these examples through Google… I am building my own CMS system and I think I could use your drag’n’drop scripts. I would need them for my content designer. The idea is that the user separately creates web-parts, and them combine multiple web-parts into web-page.
    I would have predefined HTML table layouts stored is MySQL database – it cells would be my target area. Somewhere on the right would be a list of possible web-parts (also stored in MySQL database). User would then drag’n’drop these web-parts to some cell and press save button. I could then store this page layout (with content) in the database in the following format:

    web-part 1

    web-part 2
    web-part 3

    web-part 4

    Do you think this is possible with your script?
    Thanks&KR, bk

  13. @bk – Yes it is possible. Table layout (I mean page layout) can be saved in database. When user selects certain type of page layout, table within drag container will be generated (I suppose) with PHP. After table and elements on the right are displayed, user can drag elements to the table cells. You can save table content on button or on element drop. Something similar to the “School timetable” in example03 directory. If you will need further assistance, please feel free to contact me.

  14. First, I have to say that this is wonderful tool. It is very robust and so far ease to work with.

    However, I am just not sure how to get the delete/undelete to work. Or more specifically the undelete. I just am not seeing how your example code is restoring the item back to its original cell when cancel is selected on the trash_ask pop up. Any help would be greatly appreciated.

    Thanks,
    Steve

  15. @Steve – In a moment when element is dropped to the Trash cell, DIV element is deleted from DOM. Please find the following lines in redips-drag.js file (line 975):

    // remove child from DOM (node still exists in memory)
obj.parentNode.removeChild(obj);

    Browser will delete DIV element but element will still exist in memory. It is only important to remeber reference to the delete element. If user decides to cancel element deletion, element can be appended to the previous table cell (or any other element in DOM). Here is how:

    // append removed object to the source table cell
tables[table_source].rows[row_source].cells[cell_source].appendChild(obj);

    Hope this short info will be helpful to you.
    Cheers!

  16. hi! i hope this post is still alive.. is it possible to add another element (example blue) which can be dropped to both orange and green cells? i would really appreciate the reply.. thanks..

  17. Hi Enna,
    yes it’s possible to have blue DIV element which will be able to enter to green and orange cells. Just follow this simple steps:

    1) define blue clone element (on the similar way as is green/orange clone element defined):

    <div id="blue" class="drag blue clone climit1_2">Blue</div>

    2) add common class name to green and orange table cells (name it “common”):

    <!-- orange table cell -->
<td class="mark orange_cell common single"></td>

<!-- green table cell -->
<td class="mark green_cell common single"></td>

    3) add exception for blue elements in script.js file:

    // define exception for blue elements (first element and two cloned)
rd.mark.exception.blue = 'common';
rd.mark.exception.bluec0 = 'common';
rd.mark.exception.bluec1 = 'common';

    With this modification, blue elements will not have any restriction. They could enter to green and orange cells. Hope this lines will help you. Cheers!

  20. @Poonam – Please see example3 School timetable. It is demo with option to save table content to database. Just download redips2.tar.gz package to see complete source. It also has option to save each DIV move (this modification is placed in example03/ajax directory). All instructions are in docs/readme.txt file.

Leave a Comment