JavaScript Drag and Drop example 3

School timetable is example of how to use REDIPS.drag library. Page layout contains two tables – left table with school subjects and timetable on the right. After subject is placed to timetable, button in the same color will be displayed next to the subject (clone object).

REDIPS.drag example03

Please note two checkboxes in upper left timetable corner. First checkbox is turned on by default to enable cloning subjects across a week. You can turn it off for placing single subject to timetable. If second checkbox is checked, then “subject report” will pop up if report button (button next to subjects in left table) is clicked. At the same time, all other subjects will be hidden. Clicking on any element in left or right table will show up all elements.

The following code shows event.dropped() event handler (with logic for cloning DIV elements across a week).

rd.event.dropped = function () {
    var objOld = rd.objOld,                // original object
        targetCell = rd.td.target,         // target cell
        targetRow = targetCell.parentNode, // target row
        i, objNew;                         // local variables
    // if checkbox is checked and original element is of clone type
    // then clone spread subjects to the week
    if (document.getElementById('week').checked === true &&
        objOld.className.indexOf('clone') > -1) {
        // loop through table cells
        for (i = 0; i < targetRow.cells.length; i++) {
            // skip cell if cell has some content
            // (first column is not empty because it contains label)
            if (targetRow.cells[i].childNodes.length > 0) {
                continue;
            }
            // clone DIV element
            objNew = rd.cloneObject(objOld);
            // append to the table cell
            targetRow.cells[i].appendChild(objNew);
        }
    }
    // print message only if target and source table cell differ
    if (rd.td.target !== rd.td.source) { 
        printMessage('Content has been changed!');
    }
    // show / hide report buttons
    reportButton();
};

Source code (including school timetable with save/recall table using PHP and MySQL) and detailed description of library can be found on Drag and drop table content with JavaScript.

176 thoughts on “JavaScript Drag and Drop example 3”

  1. Sorry! I think I meant to say “get the value of attributes”, not “get elements”. :)

  2. Hi,

    Is it possible to save content from more than one table? I see var content = REDIPS.drag.saveContent(‘table2’); in the script.js but how will I be able to differentiate between the two or more table ids?

    Right now the tbl_id in redips_timetable auto increments, could I use that to differentiate for each table?

  3. Never mind, I found how to do it with your AJAX example. Thanks for providing this library to the public!

  4. Hello.
    I try to fill left table (table1) with javascript and it doesn’t work (not draggable)
    var eltab=document.getElementById(‘table1′);
    var rc=eltab.rows.length;
    // delete row except 2 first
    for(var x=rc-1;x>1;x–)
    {eltab.deleteRow(x);} // OK
    var newRow=eltab.insertRow(2);
    newRow.className=’dark’;
    var newCell0=newRow.insertCell(0);
    newCell0.innerHTML=”something”;

    On my screen it’s correct but I cannot drag it.

    Thank you.

  5. newCell0.innerHTML=”something”;

    On my screen it’s correct but I cannot drag it.

    Thank you.

  6. Hello,
    OK I understand why and it runs correctly now.
    I can save the clones by savecontent in Mysql -> it runs.
    But now I want to read Mysql to see the clones I wrote before.
    Is it possible ?

    Thank you.

  7. Hi, How can I extend the code that I get a dynamic calendar for the whole year with all days and weeks? Is it also possible to give to all the table cells in the schedule an automatic unique ID? Thank you so much :)

  8. How do you save two subjects in the same cell if you change drop mode to multiple?

  9. Hi. i am using this code in my administration area. I put multiple teachers in every day and hour (about 5) and it result in more than 100 positions in one week. The question is:
    method GET is not good for me, it truncate at about 100 rows (too limited). I need to use POST method for content variable in script.js and read that variable in db_save.php, but i have no idea, $.ajax give my an error ($ not defined). Can you help with this, please? Thank you!

  11. @cata mitu – Please see redips.save() method in example22. In this example form elements are send to the server using POST method. This code can be slightly modified for your case because AJAX call functionality is already built-in in REDIPS.drag lib.

    // method parses form elements and submits to the server
redips.save = function (button) {
    var frm = document.getElementById('myform'),
        el,
        params = '',
        i;
    // prepare all form elements like name1=value1&name2=value2&name3=value3...
    for (i = 0; i < frm.elements.length; i++) {
        // set element reference
        el = frm.elements[i];
        // if form element is input text
        if (el.type === 'text') {
            params += el.name + '=' + el.value + '&';
        }
    }
    // cut last '&' from params string
    params = params.substring(0, params.length - 1);
    // make ajax call and set redips.handler2() as callback function 
    redips.rd.ajaxCall(redips.ajaxSave, redips.handler2, {method: 'POST', data: params});
};

    @SIVA SEMMANKADU GANESAN – Client code is the same no mater what is on the server side. Server side should accept parameters, process and save to the database. Please see example03 where is prepared case for the PHP and MySQL.

  12. Dear dbunic. Congratulations.

    Is it possible to change the cell background color that can not be dropped
    on start drag (event.clicked) ?
    And back to original color (event.finish)

  13. Hi
    How can I change background color of blocked cell when star drag and turn original color when stop?

    Example: Arts can’t placed in Monday. And Math dropped on 11:00.

    I have no idea to give this feedback to user before hover de cell.

    Thanks

  14. Hi, event.moved() is called in the moment when DIV element is moved from its home position – this can be considered as start dragging. For drag stop please see description for event.dropped() and event.droppedBefore() handlers. With using this event handlers, it’s possible to write some custom JS code to change TD background colors.

  15. dbunic

    Sorry for the duplicate message, I thought the first one was not sent.

    This is part of my code under construction. It’s working for now.

    redips.addBackground = function (className) {
    var tbl = document.getElementById('table2');
    for (var i = 1; i < tbl.rows.length; i++) {
        for (var j = 1; j < 6; j++) {
            var cell = tbl.rows[i].cells[j];
            if (cell !== undefined && !cell.classList.contains(className))
                cell.classList.add("blank");
        }
    }
}

rd.event.finish = function () {
    var elems = document.querySelectorAll("td.blank");
    for (var i = 0; i < elems.length; ++i) {
        elems[i].classList.remove("blank");
    }
};

    Thank you

  16. I’m glad you solved the problem and using event.finish() is even better than my suggestion. Thank you for feedback :)

Leave a Comment