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.
Hello
Is that possible to extend the functionality of the script? I would like to have an drop down list for days. Then I would select the day and drop the content… All data should be saved per day in database.
I tried with mysql. Unfortunately it does not update the db content, is that a bug?
Thanks
mpol_ch
@Polat – Your idea sounds feasible but it’s hard to determine where is the catch exactly. I can give you only a general answer. Anyway, If you want to have user interface “per day” (not displayed whole week), you will need to append day id (day of the week) to the database to avoid overwriting existing data. According to that, it’s needed to send day id with table content when saving. Hope this tips will help you to continue with your project.
You are a genius
I was wondering if you can help, I wanted to create a drag and drop just like the one on top of this page
http://www.redips.net/javascript/drag-and-drop-example-3/ (your’s), but with the capability to have more than one row handler in a row. (from what i can see you did).
will like to be able to set up time frames for each event/content to work as a link.
also how can i create a drag library quiz that will show on the left and can be drag towards the right into the calendar table. Zack’s WordPress Sandbox.
i just stared looking and codes and frankly i don’t know how to put the peaces together or were to integrate them to work in my local host site . will you be able to help.
if so what is your rate .
thanks.
@jose – I will try to help you. Maybe you can prepare initial demo on jsFiddle (something like I did http://jsfiddle.net/dbunic/nawszfuk/) so we can work together. It’s a very nice tool to build HTML, CSS and JavaScript examples. The best part is, it has versions so we can see the progress. My suggestion is to fork demo from link above and to prepare new fiddle, then we will create updates and work together.
Hope it will not be a problem for you.
;)
Dear Sir,
I’d want to transpose. i.e the subjects on the columns and days on the left. How can we?
@AVerma – This should not be a problem. The simplest method would be to insert “days” (Mon, Tue, Wed, Thu …) as subjects to database and to change labels of HTML table in index.php. With this trick you will be able to drag days to table and to save table content.
Next step can be to fix left table with days (e.g. hardcode it to HTML because week days are constant) and to insert “real” subjects to database. This change will imply adding PHP logic to dynamically exapand right table with subject columns. If you are familiar with PHP basics, that should be easy for you – source code is clean and well commented.
Really wonderful and very useful. Welcome this development.
I’m a starting programmer and consult if you could help me achieve that in Example 3, to position myself on the cells of the left, is shown with AJAX more information (like the example 16). Try unsuccessfully to join Example 3 and 16 and could not do. Could you help with that?
My problem is that the left table cells contain much information and what occurred to me is that AJAX is shown equal to Example 16
From already thank you
@gerardo – I have prepared example and send you resulted code. You will find changes in script.js and style.css files. Hope this will be a good point for further development. Cheers!
Hello dbunic,
Awesome features on REDIPS, congratulations!
Is it possible to create a feature like the “week” checkbox, but instead of automatically cloning an element for the entire week (row), clone it for the entire day (column)?
Cheers!
Hello dbunic,
For example03, I moved the subject table to the bottom, and the timetable above it, the drag and drop seems not working.
indexLeftAbove.php – working
indexLeftBelow.php – not working
Hope you can help as soon as possible.
Thank you very much.
Mary
@Gustavo – Yes it’s possible. Instead to loop all cells from one TR, you should make loop through all table rows and reference particular TD. With some basic JS skills, modification of loop from rd.event.dropped() should not be a problem. Just open script.js file and you will find the only loop inside rd.event.dropped() event handler. This is the modification point for your case.
@Mary – Maybe you have the problem with styles. Try to remove
… from #main_container #left element. After this was removed, Trash cells started to work – if that was a problem. Anyway, original example was designed to have DIV sections side by side, and for your case this styles should be cleaned from style.css file.
You will see that I played with the table content after “float: left” was commented on the browser. ;)
i need to contact you for a job on a similar School timetable. I’ve 10 classes with the same teachers and i need to block the insert in the same hour when the teacher is alrady signed in another class.
@dino – You can find my contact info on About page. I’ll try to help as much as I can but my free time is very limited …
Hey,
I want to see the default timetable, if i go to the default link, but i will be able to create a link to share a created timetable. Is there any possibility to do this?
Thank you
Fabi
In your example03, I’m dragging elements within the timetable… when I move the contents of a single cell from one place to another, how can I get the location and contents of the source cell?
@Fabi – Default link to example03 demo doesn’t work because database on this site is not prepared. Instead, I have created “static” version to demonstrate how Timetable dragging works. Complete version have “Save” button at the table bottom compared to “static” version.
@George – Please see example03/ajax/script.js file. Here is code snippet that should describe how to get DIV position and id:
// save - after element is dropped rd.event.dropped = function () { // get element position (method returns array with current // and source positions - tableIndex, rowIndex and cellIndex) var pos = rd.getPosition(); // save table content sendRequest('ajax/db_save.php?p=' + rd.obj.id + '_' + pos.join('_')); };DIV content is actually a label and the id of DIV element is sent to the sendRequest() method to be saved. Hope this comment answers to your question ;)
This is great! Is it possible to have the names of subjects (English, Chemistry, etc) editable? Thanks!
I am trying to implement the dynamic timetable, but I notice whenever I add a new subject to the existing subject in the database and use it in the timetable, its functions especially the trash seem to become erratic and doesnt delete a subject when I do. Please what do you think am doing wrong or might be the problem?
@PD – In this demo, DIV elements contain pure text as name of subjects. It’s possible to place input field in DIV so user will be allowed to rename subject if needed. Hope this answers to your question.
@Kes – The problem might be related to size of drag container. Please try to add the following lines to style.css file:
#drag { border: 1px solid lime; }After page refresh, drag container will be visible. My guess is that subjects in left column exceeds out of drag container and that’s the reason of problem. Solution is to vertically extend drag container for newly added subjects in your case.
Hello! Is it possible to use elements from the target cell (ie id, class) etc. after the drop for additional jquery functions?
(ps: brilliant stuff!)