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.
Hi
This is a nice tutorial and snippet. Smooth looking and operating thanks!
Can you possibly show some examples with PHP/mySQL?
An example would be allowing the user or the session to have the data saved and placed into mysql.
Khaleel
@Khaleel - In redips2.tar.gz package you will find this demo with save function - MySQL / PHP. Package also contains database.sql script to create needed MySQL tables.
eu quero o que é calendário?de 3 exemplos
sou liiiiiiiiiinnnnndaaaaaaaaaaaa
If you drag more than one item into a table cell and hit save, only one of the items will be saved. How can I save both?
@Question - Example3 was designed to show how to save timetable content. This example implies one DIV element per table cell.
REDIPS.drag.drop_option = 'single';
Anyway, I modified config.php to work with more than one element per table cell. If you comment drop_option line, example will save and display more than one DIV element per table cell.
Cheers!
Problem:
How to get the timetable work with events with different lenghts.. -> for example an event which is 3hours and 12 minutes long... this should take 4 table cells
very awesome....anyway how to configure the lesson with the teacher, I mean, how make a schedule and how to identify if the schedule is collision each other..need your help too much...(via email please...)..thanks for your attention.
Thanks a lot for these great tutorials.... javascript is working great... i like it very much.
Hi
Hope you are well, I am still enjoying dragging and dropping.
I can't work out why on this timetable example, if you drag and then drop back on the original cell it will drop it and create a clone. I know this shouldn't happen.
I am sure it will take you a couple of milliseconds to work it out!
Thanks again for sharing this code.
Hi
Pls ignore my previous post about the drag and drop cloning when dropped back on the cell. I think it was an old browser issue, as I don't have the same problem on this pc.
Sorry, many thanks again for sharing the code.
Hi
How can I insert a full week with 7 days (saturday and sunday included).
How can I insert a full day with 24 hours.
Thanks
Best
Joseph Caristena
Author and Developer of
ExeForm Web Channel
A Web TV Network
Very helpful! I need exactly this example but if I want to put more than one item in the same cell? like http://www.redips.net/javascript/drag-and-drop-table-content/
Is it possible?
Thanks
very awesome....anyway how to configure the lesson with the teacher, I mean, how make a schedule and how to identify if the schedule is collision each other..need your help too much...(via email please...)..thanks for your attention.// kevin says //
I also want to learn about this. How can I make some comparisons in database when I mouse hover on them.
where I put my code or I will some new code for onmousehover function.
I must take id of the object in my hand and when I hover on a cell before drop I will make some interactions withmy database.
Can you help me please via code because of I don't have enough knowledge about javascript . thank you very much right now ...
wont you help me ???
@Mehmet - Sorry for delay ... Newest REDIPS version has myhandler_changed() event handler where you can place custom JavaScript code (collision testing). So every time when highlighted cell changes position this event handler will be executed.
On the other hand, user can move DIV object very fast and if you plan to use myhandler_changed() + AJAX to retrieve data from database it might not work as expected - because of asynchronous communication. It's not impossible but requires respecting correlation between AJAX call and visited table cell.
I will suggest to use myhandler_dropped() event handler where you can test collision after user releases left mouse button. If collision exists, DIV object can be moved to the previous location.
AJAX isn't so complicated to understand. Please see details on my page AJAX progress bar how to write simple AJAX requests ...
I hope this answer will be helpful.
thanks for answer I will try
if I can't I will ask again
if you don't angry 
thanks again
Hi dbunic,
Awesome examples here! Learning a lot ...
I was wondering if you have something where you drop say the "English" lecture in say the cell marked "08:00", and it clones that over for all 5 days at one shot, instead of having to copy them one by one.
I'm assuming the clone method will have to be called repeatedly for that.
Would be great to see an example for that. Thanks.
In continuation to my previous post, I am able to clone the subjects at one shot when I drop to the box marked Monday for instance, but once created, these new DIVs are not movable.
This is how I am creating the new DIVs.
for (i = 1; i < table.rows.length; i++) {
row = table.rows[i];
var newDiv = document.createElement('DIV'); //New Div object
newDiv.setAttribute('id', 'en');
newDiv.setAttribute('className', 'drag green');
var txt = document.createTextNode("English");
newDiv.appendChild(txt);
row.cells[1].appendChild(newDiv);
}
Do I need to do something more ?
Thanks for your help