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 |
| Monday | Tuesday | Wednesday | Thursday | Friday | |
| 8:00 | |||||
| 9:00 | |||||
| 10:00 | |||||
| 11:00 | |||||
| 12:00 | |||||
| 13:00 | Lunch | ||||
| 14:00 | |||||
| 15:00 | |||||
| 16:00 | |||||
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 myhandler_dropped() event handler (with logic for cloning DIV elements across a week).
rd.myhandler_dropped = function () {
var obj_old = rd.obj_old, // original object
target_cell = rd.target_cell, // Target cell
target_row = rd.target_cell.parentNode, // Target row
marked_cell = rd.marked_cell, // marked cells
mark_cname = rd.mark_cname, // name of marked cells
i, obj_new, mark_found; // local variables
// if checkbox is checked and original element is clone type then
// clone school subject to the week
if (document.getElementById('week').checked === true
&& obj_old.className.indexOf('clone') > -1) {
// loop through table cells
for (i = 0; i < target_row.cells.length; i++) {
// skip if table cell is not empty (true for cell where
// element is currently dropped)
if (target_row.cells[i].childNodes.length > 0) {
continue;
}
// search for "mark" class name
mark_found = target_row.cells[i].className.indexOf(mark_cname) > -1 ? true : false;
// if current cell is marked and access type is 'deny' or current cell
// is not marked and access type is "allow" then skip this table cell
if ((mark_found === true && marked_cell === 'deny') ||
(mark_found === false && marked_cell === 'allow')) {
continue;
}
// clone DIV element
obj_new = rd.clone_div(obj_old);
// append to the table cell
target_row.cells[i].appendChild(obj_new);
}
}
// print message only if target and source table cell differ
if (rd.target_cell !== rd.source_cell) {
print_message('Content has been changed!');
}
// show / hide report buttons
report_button();
};
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.
@Razmataz - Cloning from cloned elements is possible. Please try example11 - actually copy HTML of circle clone DIV element to the mini table above and reload page. You will see that cloned mini table will contain circle element with remain clone option. So technically it's possible, but the lib will not take care about unique ID set of DIV elements. There still needs some work to do.
In a new version, "overwrite" code around line 1037 will be replaced with a function and exposed as a empty_cell() public method. Here is JavaScript code:
/** * Method removes elements from table cell. * @param {HTMLElement} td Table cell from which all elements will be deleted. * @example * // set REDIPS.drag reference * var rd = REDIPS.drag; * // search for TABLE element (from cell reference) * tbl = rd.empty_cell(td); * @return {Boolean} Returns false if input element is not table cell. * @public * @function * @name REDIPS.drag#empty_cell */ empty_cell = function (td) { var i, // local variable cn; // number of child nodes // if td is not table cell element then return false if (td.nodeName !== 'TD') { return false; } // define childnodes length before loop // (not in loop because NodeList objects in the DOM are live) cn = td.childNodes.length; // delete all child nodes from td for (i = 0; i < cn; i++) { td.removeChild(td.childNodes[0]); } };Please be free to add a comment to improve this method. Thanks in advance.
Great work!
I'm trying to use this example for a prototype scheduler (internship assignment), however i have a little problem (i think). I disabled the rule that a cell may only contain 1 item (so now it can contain more), but now the left bar with subjects can also contain more than one, what not really usable is. Is it possible so that 1 table can have more items in a cell, and that another table is unable to do that?
>is it also possible to add a class to cells, so that those cells cannot contain more than 1 item? Or should i just change script.js so that it behaves that way?
Offcourse thanks again for this great javascript library! Great that it works for most/all browsers!
Never mind!
Adding the class "mark" did it for the left subjects bar!
It's possible to do switch between two div in two tables separate by containers?
@Rub3s - I'm glad your problem is solved!
@Cristian Juvé - If you have separated drag containers then you will be unable to drop DIV element to other container. Please see Example 8: Tables in separated containers. Anyway, several tables can belong to the same drag container (like in "School timetable" example) and elements can be exchanged among them.