JavaScript Drag and Drop example 3

More...

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
Drag school subjects to the timetable (clone subjects with SHIFT key)

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

This entry was posted on February 22, 2010 and is filed under Drag and Drop, JavaScript

Related posts

153 Responses to JavaScript Drag and Drop example 3

  1. Polat says:

    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

  2. dbunic says:

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

  3. jose says:

    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.

  4. dbunic says:

    @jose - I will try to help you. Maybe you can prepare initial demo on jsFiddle (something like I did http://jsfiddle.net/h6rvQ/4/) 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.
    ;)

  5. AVerma says:

    Dear Sir,
    I'd want to transpose. i.e the subjects on the columns and days on the left. How can we?

  6. dbunic says:

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

  7. Gerardo says:

    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

  8. dbunic says:

    @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!

  9. Gustavo says:

    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!

  10. Mary says:

    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

  11. dbunic says:

    @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

    float: left;
    

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

  12. dino says:

    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.

  13. dbunic says:

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

Leave a Reply

Your email address will not be published. Required fields are marked *

*

In case of posting HTML tags or JavaScript code please convert special characters to HTML entities.
Especially pay attention to convert "<" character to "&lt;" entity!