DESCRIPTION

DNDX.JS is a Web Front End Javascript library enhancing jQuery UI's Draggable/Droppable Widget libraries. jQuery UI's Draggable and Droppable Widgets are doing a good job in providing us most of fundamental Drag & Drop functionalities. However, from my experience of having written some Drag & Drop UI code, we still need to take care of some higher level functionalities where jQuery UI's Draggable/Droppable Widgets don't cover for us.

Main concern of DNDX.JS is providing you HIGHER LEVEL Drag & Drop features while delegating most of its lower level D&D functions to jQuery UI's Draggable and Droppable Widgets.

A few key benefits of DNDX.JS are as follows:

1. Ready-made visual effects for Drag & Drop interactions
   • D&D interactions need visual cues to give the user a hint about which object can be a drop target and which object is ready for the drop, etc.
   • DNDX.JS provides several CSS styles and animations to be used for out-of-box visual cues.
   • Also you can easily customize the visual cue or plug in your own visual cues.
   • Refer to this discussion for more detail.
2. Friendly API
   • DNDX.JS has adopted Method Call Chaining idiom like jQuery, thus it is easy to use.
   • DNDX.JS has been designed having real use cases in mind, and will make your code less messy and more manageable.
3. Resolving conflicts caused by multiple simultaneous D&D interactions
   • D&D interactions may easily become buggy in a highly dynamic and complicated view especially when multiple interactions occur simultaneously.
   • DNDX.JS provides a solution for this kind of issue.
   • See more discussion about Conflict Resolution

Try the demo and find out what DNDX.JS can do!

It also provides API documentation and Wiki Topics for a few key subjects.

HOW TO USE

Import css/dndx.css and js/dndx.js file into your HTML file like so:

<link rel="stylesheet" href="css/dndx.css">

<script src="js/dndx.js"></script>

You can use the library like so (almost every method call is chainable):

// For a pair of ".draggable", ".droppable"
// where ".draggable" is a CSS selector for source objects,
// and ".droppable" is a CSS selector for target objects.
dndx(".draggable", ".droppable")
    // Apply "Exterior" built-in visual cue
    .visualcue("Exterior") 
    // And set callbacks for various events
    .onstart(onStartCallback)
    .onconflict(onConflictCallback)
    .onover(onOverCallback)
    .ondrop(onDropCallback);

LINKS

• Demo
• API Documentation
• Wiki
• DNDX.JS at Custom Elements
• DNDX.JS at NPM

COPYRIGHT/LICENSE/DISCLAIMER

Copyright (c) 2016 Suewon Bahng, [email protected]

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Written by Suewon Bahng ( Last Updated 25 May, 2016 )

CONTRIBUTORS

Suewon Bahng

Other contributors are welcome!