JavaScript Drag and Drop example 3

School timetable is another example of how to use my Drag and Drop library. Detail description of library can be read on Drag and drop table content with JavaScript. This example is built on top of two tables: school subjects on the left and timetable on the right. Final layout looks very similar to example 2, but there is used only one HTML table..

English
Mathematics
Physics
Biology
Chemistry
IT
Arts
History
Ethics
Trash
Please drag school subjects to the timetable

With DIV layout tables are placed side by side. Left table contains trash and clone elements with school subjects while right table is prepared for save_content() function. Before using, Drag and drop library - drag.js, should be loaded and initialized. Next few lines shows library configuration used in this example. In initialization process, script searches for tables closed in <div id="drag"> and prepares landing cells.

window.onload = function () {
  // initialization
  REDIPS.drag.init();
  // dragged elements can be placed to the empty cells only
  REDIPS.drag.drop_option = 'single';
  // set hover color
  REDIPS.drag.hover_color = '#9BB3DA';
  // don't ask on delete
  REDIPS.drag.trash_ask = false;
  // event handler after element is dropped (needed for spanning across row)
  REDIPS.drag.myhandler_dropped = function () {
    var obj         = REDIPS.drag.obj;                    // dragged OBJect
    var obj_old     = REDIPS.drag.obj_old;                // original object (not cloned)
    var target_cell = REDIPS.drag.target_cell;            // target cell
    var target_row  = REDIPS.drag.target_cell.parentNode; // target row
    var marked_cell = REDIPS.drag.marked_cell;            // deny / allow marked cells
    var mark_cname  = REDIPS.drag.mark_cname;             // class name of marked cells
    var i, obj_new, mark_found, id;                       // 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 table cell where DIV element is dropped
        if (target_cell === target_row.cells[i]){
          continue;
        }
        // skip if table cell is not empty
        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 isn't 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 = obj.cloneNode(true);
        // set id (first two characters are id of original element)
        id = obj.id.substring(0, 2);
        // set id for cloned element
        obj_new.id = id + 'c' + REDIPS.drag.cloned_id[id];
        // increment cloned_id for cloned element
        REDIPS.drag.cloned_id[id] += 1;
        // set onmousedown event for cloned object
        obj_new.onmousedown = REDIPS.drag.handler_onmousedown;
        // append to the table cell
        target_row.cells[i].appendChild(obj_new);
      }
    }
  }
}

Package redips2.tar.gz contains source code and several examples including school timetable with save/recall table using PHP and MySQL.

Related posts

Bookmark and Share

12 Responses to “JavaScript Drag and Drop example 3”

  1. Khaleel says:

    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

  2. dbunic says:

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

  3. Ana Carolina says:

    eu quero o que é calendário?de 3 exemplos

  4. Ana Carolina says:

    sou liiiiiiiiiinnnnndaaaaaaaaaaaa

  5. Question says:

    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?

  6. dbunic says:

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

  7. gecko says:

    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

  8. kevin says:

    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.

  9. Shashi says:

    Thanks a lot for these great tutorials.... javascript is working great... i like it very much.

  10. Fred says:

    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.

  11. fred says:

    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.

  12. Joseph Caristena says:

    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

Leave a Reply