JavaScript Drag and Drop example 2

This post shows how to use Drag and Drop library described in my previous post Drag and drop table content with JavaScript. HTML table is stylized to have left column with content, main table and message line. Elements on the left side (green and orange) should be placed to the coloured table cells. After elements are correctly sited, appropriate message will be displayed. Please try ...

Now follows HOWTO. First step is to include Drag and drop library from redips2.tar.gz package. Package contains source code (well commented) and compressed file drag-min.js ready for production.

<script type="text/javascript" src="/my/drag-min.js"></script>

And the second step is to initialize / configure Drag and Drop library. Only initialization is mandatory while other library properties have default values. You can see how to define destination table cells for green and orange elements. It's possible to define destination cells for each dragged element. At the beginning, left column contains green and orange elements with id="green" and id="orange". This elements are defined to clone two elements. Cloned elements will get id greenc0 / greenc1 and orangec0 / orangec1.

window.onload = function () {
  var num = 0,           // number of successfully placed elements
      rd = REDIPS.drag;  // reference to the REDIPS.drag class
  // initialization
  rd.init();
  // set hover color
  rd.hover_color = '#9BB3DA';
  // define green elements for green cells
  rd.mark.exception.green = 'green_cell';
  rd.mark.exception.greenc0 = 'green_cell';
  rd.mark.exception.greenc1 = 'green_cell';
  // define orange elements for orange cells
  rd.mark.exception.orange = 'orange_cell';
  rd.mark.exception.orangec0 = 'orange_cell';
  rd.mark.exception.orangec1 = 'orange_cell';

  // this function (event handler) is called after element is dropped
  REDIPS.drag.myhandler_dropped = function () {
    var msg; // message text
    // if the DIV element was placed on allowed cell then
    if (rd.target_cell.className.indexOf(rd.mark.exception[rd.obj.id]) !== -1){
      // make it a unmovable
      rd.enable_drag(false, rd.obj.id);
      // increase counter
      num++;
      // prepare and display message
      if (num < 6)  msg = 'Number of successfully placed elements: ' + num;
      else      msg = 'Well done!';
      document.getElementById('message').innerHTML = msg;
    }
  }
}

Drag and Drop library has 11 event handlers:

1. myhandler_clicked
2. myhandler_moved
3. myhandler_notmoved
4. myhandler_dropped
5. myhandler_switched
6. myhandler_cloned
7. myhandler_clonedend1
8. myhandler_clonedend2
9. myhandler_notcloned
10. myhandler_deleted
11. myhandler_undeleted

In this example you can see how to use myhandler_dropped event handler and how to test if element is dropped to the allowed table cell. Example also shows how to define single content table cell on the globally defined "multiple" drop option. Single content cells are in the corners of the main table, while "multiple" is default option and it hasn't be defined explicitly. Hope this post will give some ideas of how to use Drag an Drop library.

Related posts

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

This entry was posted on Tuesday, 02.02.2010. at 11:57and 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.