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

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

• JavaScript Drag and Drop example 4
• JavaScript Drag and Drop example 2
• Drag and Drop table content with JavaScript
• Autocomplete without AJAX
• Image hover using Javascript

This entry was posted on Monday, 22.02.2010. at 10:31and is filed under Drag and Drop, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.