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).

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.