JavaScript Drag and Drop example 3

More...

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 the timetable, button in the same color will be displayed next to the subject (clone object).

Arts
Biology
Chemistry
English
Ethics
History
IT
Mathematics
Physics
Trash
Drag school subjects to the timetable (clone subjects with SHIFT key)

Please note two checkboxes in the upper left corner of timetable. First checkbox is turned on by default to enable cloning subjects across a week. You can turn it off for placing single subject to the 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.

This entry was posted on February 22, 2010 and is filed under Drag and Drop, JavaScript

Related posts

165 Responses to JavaScript Drag and Drop example 3

  1. Mrs Cooper says:

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

  2. Ivan says:

    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. Ivan says:

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

  4. alain says:

    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. alain says:

    newCell0.innerHTML="something";

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

    Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

In case of posting HTML tags or JavaScript code please convert special characters to HTML entities.
Especially pay attention to convert "<" character to "&lt;" entity!