CSS Drag and Drop Module Demo

The CSS Drag and Drop Module automatically configures screen reader and keyboard accessible drag and drop functionality using standard DOM elements.
Module files:

1. css_drag_drop_module.js : Automatically morphs standard DOM elements into draggable AccDC Objects accessible to screen reader and keyboard only users using an object literal declaration to configure.
2. setup.js : The object literal declaration and bindings that configure the demo functionality.

The packaged file for this demo can be downloaded from WhatSock.com under Downloads.

Instructions:

• Activate the "Set Drag&Drop" button to morph all book images into draggable AccDC Objects.
• Using the mouse, drag and drop each book that you would like to read into the Reading List section, or visa versa to remove them from the Reading List.
• Using the keyboard, arrow or tab between each draggable book, and press the Enter or Spacebar keys to toggle dragging.
• Tab to the Reading List section, or jump to the Reading List heading using screen reader quick navigation commands, then drop each item currently being dragged by pressing the Enter or Spacebar key on relevant drop links.
• Do the same for the books in the Reading List section, then press shift+tab to navigate to the drop links at the beginning of the Bookshelf section, or use screen reader navigation commands to jump to the Bookshelf section heading where the new drop links are located.
• Alternatively, use the hotkeys associated with each of the Bookshelf and Reading List headings to jump between each section.

The CSS Drag and Drop Module automatically synchronizes mouse and keyboard activity for drag and drop functionality.

// Object literal declaration to configure drag and drop functionality
config = {

// Specify draggable objects
setDrag: 'CSS Selector',

// Specify the drop zone
setDrop: 'CSS Selector',

// Return the string value for every draggable node matching "setDrag" to use as the drag and drop link text
setName: function(obj){
return obj.STRING;
},

// Set the initial styles for the morphed AccDC Object
cssObj: {
property: 'value'
},

// Run script before the AccDC Object opens
runBefore: function(dc){
// Do something
},

// Run script after the AccDC Object opens
runAfter: function(dc){
// Do something
},

// Configure drag and drop event handlers
on: {
dragStart: function(ev, dd, dc){
// Do something
},
drag: function(ev, dd, dc){
// Do something
},
dropStart: function(ev, dd, dc){
// Do something
},
drop: function(ev, dd, dc){
// Do something
},
dropEnd: function(ev, dd, dc){
// Do something
},
dragEnd: function(ev, dd, dc){
// Do something
}
},

// Restrict draggability within a specific container
confineTo: 'CSS Selector',

// Set the drop animation time length in milliseconds for keyboard users
duration: 2000,

// Optionally set a custom insertion point where drop links will be inserted into the DOM
dropAnchor: 'CSS Selector',

// Set additional styling for the hidden drag and drop links
ddCSS: {
property: 'value'
},

// Optionally set a root node for tunneling
root: document

};

// Morph all specified DOM nodes into draggable AccDC Objects
setDragAndDrop(config);