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).
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.
left table has lessons these lessons has id ar bi ci so you compare id and subject in js if we take lessons from database how can we set these id s and compare its?
I know this question not important for you but I cant draw to scenario in my mind.
thanks alot
@Ali – Number of cloned elements can be limited with climit class. Please see:
REDIPS.drag documentation – Appendix A
Example 2: Green and orange elements
This is the most easiest way how to control cloning. Harder is to create JavaScript function that will count already dropped DIV elements in event.droppedBefore() event handler.
I’m not sure if I understood your second question correctly, but you can assign ID to these DIV elements directly in HTML like it is in example02. Every cloned DIV element will have cnn appendix to original ID (nn is integer). This way it’s possible to distinguish source DIV element from its clones.
Thank you so much Darko! I honestly never would have been able to figure out how to do that so easily! I’ll definitely be sure to tell all my programming friends to check out your site!
Hi again!
I noticed that there is a bug that occurs if the user grabs a single course and places it anywhere within the timetable and then switches to full week mode and places the same course anywhere on the timetable. When that happens, the entire week is filled with that subject and there is a duplicate within one day.
For example, Ethics is placed on Wednesday at 11:00. The user then has the checkbox enabled to apply any subject throughout the entire week. They then grab Ethics and drop it on Monday at 15:00. The whole week at 15:00 has Ethics and Wednesday at 11:00 also has Ethics! The user can’t move either one of the two duplicated Ethics on Wednesday anywhere except to the Trash which then behaves normally. This bug only occurs when the example above happens or if the user holds down the SHIFT key and clones a subject already on the timetable.
The SHIFTing example can be remedied by setting rd.clone.keyDiv to false, but how can somebody fix the example? Is it at all possible to fix this bug? I’ve been working at this for a couple of hours now and everything I’ve tried has broken the page!
@Saro – Please download latest redips2.tar.gz package and you will see new example03/docs/script.js file. Replace original script.js with this file and all should work as expected. Complete logic from droppedBefore() is moved to checkColumn() (you can see from where is called checkColumn() function). Cloned DIV with SHIFT key and cloning across week is now fixed.
Hello,
Very good scripts really what I was looking for, congratulations.
Hello,
Is it possible to include more subject and decrease the timetable? How to?
Thank you.
@George – Complete source code is in redips2.tar.gz package. Just download package and prepare demo locally (readme.txt with instructions is placed in example03 directory). Maybe the best way is to start with modification code and customization for your case. You will have to create two tables in database and define connection parameters in config.php file. If you need more school subjects, just insert rows to database and new “lessons” will be displayed automatically.
Hi
I want behavior like drop multiple subject is single slot.
example : if i want to drag Arts and Biology to monday, 8 Am slot.
how is that possible.. i need this Urgent.
please help me.
Thanks in advance
@Bhavesh – One TD (table cell) can contain many DIV elements. However, it’s possible to drag only one DIV in a time. The trick is to mark several DIV elements and in event.dropped() handler move the rest with REDIPS.moveObject() method. Please see example12 source code in Select and move more elements. Hope this example will be helpful for your case.
Hi Dbunic, your system works in a great manner. ITS AWESOME. Just another small query, how can I put a tool tip on every box of subjects with values from a database and the tool tip values changes as we move the subject boxes one by one. The aim is to calculate and show the no. of subjects that have been allotted to different teachers of that particular class, from a field of total_allotted_classes.
Continuing with the above query, how can I select a class and a section from two drop down boxes (1) ( A ) that gets populated from the database and on that selection the required class timetable gets loaded. I am planning to save the timetable on the basis of class ID and then load the specific class id timetable on the respective class id selection. I want to do this in the AJAX Version.
I have noticed one thing that the timetable contents are disappearing if a submit button is put in the form and not coming back even after the page is refreshed.Whereas the database is intact with the values.I have very little knowledge of AJAX, so please guide. Thanks.
@ankit – AJAX is not so complicated. My advice would be to create simple AJAX routine which will communicate with server side. You can start with a demo on my post AJAX progress bar. Below post title is download link for source code. Well, this example is “pure” AJAX, but if you already use some JS framework like jQuery, then you have a much simpler situation. Please see example0 AJAX / jQuery modification where is dynamically added second table via jQuery AJAX. Here is jQuery AJAX snippet from example0:
$.ajax({ type: 'get', url: 'ajax.php', data: 'id=' + id, cache: false, success: function (result) { // load new table $('#load_content').html(result); // rescan tables REDIPS.drag.initTables(); } });Next, with JavaScript you can modify any DOM node after page is loaded. In code above, after AJAX request if finished, HTML table is appended and REDIPS.drag lib is initialized. In the similar way you can update DIV elements tooltip to display some info.
Hope this tips will be helpful for you.
Hi there! I’m gratefully for this script, help me a lot.
But i have one question and i hope to be answer. It’s possible to create a function in this script to cloning subjects across a day?
Thanks…Keep up the good work.
Hi Hellen!
It is not a problem – just small change in loop. Here is complete code that will fill table column:
// element is dropped rd.event.dropped = function (targetCell) { // original object var objOld = rd.objOld, // set target cell index and reference to whole table idx = targetCell.cellIndex, table = rd.findParent('TABLE', targetCell), // local variables i, objNew, td; // if checkbox is checked and original element is of clone type // then clone spread subjects to the day if (document.getElementById('week').checked === true && objOld.className.indexOf('clone') > -1) { // loop through table rows for (i = 0; i < table.rows.length; i++) { // set current table cell td = table.rows[i].cells[idx]; // skip if cell does not exist or has some content // (first row and lunch row contain text) if (!td || td.childNodes.length > 0) { continue; } // clone DIV element objNew = rd.cloneObject(objOld); // append to the table cell td.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(); };Thanks a lot dbunic. Your script was very helpfull, but i have one issue left.
How i do if i want to generate a subject which takes 3 hours? The simple idea its to drag a subject to calendar and ocupied 3 blocks…
Arts -> 09:00 Arts
10:00 Arts
11:00 Arts
Thanks a lot. Kisses.
@Hellen – Unfortunately, REDIPS.drag lib can drop DIV elements only to one table cell. If you want to create a calendar like application, then you will have to dynamically merge/split cells. Please see my post Merge and split table cells with JavaScript that explains how to do it.
Cheers!
Hello! dbunic Omg you’re awesome man :D thanks for every ajax that you have posted :D
I have an issue too as hellen.
I want to drag the matter and then, that matter drops in a specific day according with the BD.
I mean, if I have ARTS in my BD but ARTS reflect two days and different hours.
(Monday 8:00-9:00 and Friday 10:00-11:00)
If you say yes I will go there and kiss you!!
No, I’m kidding but I will be really really grateful.
take care man!
@Willie – I’m not quite sure what “BD” means. REDIPS.drag library contains methods to clone and move DIV elements. This method can be called in event handler or any other action. Please see example18 Simple element animation where element is moved/cloned on button click. You can find additional info for moveObject() method in documentation.
And you don’t need to kiss me, I will help you anyway ;)
DB = data base :D
hmmmm I don’t get it yet, but I will resolve. thanks!