version 1.0.0
module: drag version 0.0.1
size-min gzipped: 1.99 kb (incl. dependencies: 15.32 kb)
dependencies: polyfill/polyfill-base.js, js-ext/lib/function.js, js-ext/lib/object.js, utils, event
maintanance: Marco Asbreuk

all modules

Simple Drag and Drop

Drag is a module which makes draggable items without any initialisation: just plain HTML. The code that takes care of this is loaded once and uses event-delegation to perform its task. You can set attributes on the HtmlElements and they will act as draggables. Of coarse these functionality can be given afterwards using javascript: you can set attributes yourself, or use Plugin's on the HtmlElements.

Because HTML defines the drag-behaviour, this module is perfectly suited for serverside rendering.

Dragging is done using the event-dom module which uses event delegation. Therefore it is very efficient, flexible and has no memoryleaks when dom-nodes are removed.

Getting Started

With nodejs:

The module drag is a typical browser-module.

In the browser:

For browser-usage, ITSA has a predefined loaderfiles. Once included, a global ITSA object with default features is available. For customized loaderfiles, read: Customized build.

<script src="/itsabuild-min.js"></script>
    var DD = ITSA.DD;
    DD.init(); // DD is actually delivered by the drag-drop module which extends drag
When using your own customized build-file, this module-requirement needs to be invoked with the window-object.


This module makes HtmlElement draggable in a very easy way, no clientside rendering:

The Basics

Draggable items are HtmlElements. This Functionalities is made operational by setting the appropriate attributes the the HtmlElements Once the code:

HtmlElements are made draggable by defining the attribute plugin-dd="true":

<div plugin-dd="true">drag me</div>

Draggable Elements

Items can be made draggable by plain HTML, or by setting the right attributes with javascript later on. The latter is exactly what the Plugin does.

Setting HTML-attributes

A fully defined draggable HtmlElement with all features will look like this (note that the drag-drop-module offers additional attributes):

<div plugin-dd="true" dd-handle="h1">
    <h1>drag me</h1>
    <p>Some content</p>


Should equal a css-selector of a descendant that should act as a handle where the draggable can be picked up.


Which emitterName the draggable HtmlElement should have (will overrule the UI-emitterName). The emitterName will be used within the events emittername:dd-drag and emittername:dd-drop

Using Plugins

When this module gets imported, it defines the node-plugin: dd. Define a HtmlElement draggable or remove draggablilty-features can be done using this plugin.

Define draggable


Remove draggablity


Define draggable with options

        emitter: 'redItem',
        handle: 'h1'

Delegate dragging

You can also define draggable behaviour at a container-HtmlElement, so you don't have to define the draggable-attributes on every single HtmlElement. Working this way, you need to specify which descendants need to be draggable by setting a css-selector dd-draggable="css-selector":

<div plugin-dd="true" dd-draggable="div" dd-handle="h1"> <!-- this div is not draggable -->
    <div><h1>drag me</h1></div> <!-- draggable -->
    <div><h1>drag me</h1></div> <!-- draggable -->
    <div><h1>drag me</h1></div> <!-- draggable -->
    <div><h1>drag me</h1></div> <!-- draggable -->
    <div><h1>drag me</h1></div> <!-- draggable -->

The container is defined as a delegate-container because dd-draggable is a css-selector instead of "true". The css-selector defines which descendants are made draggable. Additional dragging attributes should be set on the same container-HtmlElement. During dragging, the draggable HtmlElement inherits the draggable attributes from the delegate-container and gets the appropriate draggable classes.

Multiple items simultanious

You can move multiple HtmlElements at the same time. This is done by defining which Element should go along with the master-draggable. This should be defined at the very first phase of the drag-cycle: inside a before dd-event-subscriber. The definition should be made by specifying e.relatives which should be a NodeList:

ITSA.Event.before('dd', function(e) {
    e.relatives = document.getAll('.selected');


The drag-cycle can be monitored by subscribing to all separate events, or by subscribing to the *:dd-event and make use of e.dd which is a Promise. If you are familiar with Promises, the latter is highly preferable.


The drag-cycle comes with 3 events, which all share the same eventobject. This means: changing the eventobject in a specific subscriber, makes it available in later subscribers (of other events) during this specific drag-cycle.

Note that the attribute dd-emitter (on the draggable HtmlElement) determines the emitterName. When not set, all events have the UI emitterName and could be listened to without the emitter-prefix.


When the drag starts. Emits one time during the eventcycle. In case the attribute dd-emitter is not set on the draggable HtmlElement, this event has the UI emitterName (and could be listened to by just listening to the dd-event).


During dragging. Emits several times. In case the attribute dd-emitter is not set on the draggable HtmlElement, this event has the UI emitterName (and could be listened to by just listening to the dd-drag-event).


When the drag-cycle ends. Emits one time during the eventcycle. In case the attribute dd-emitter is not set on the draggable HtmlElement, this event has the UI emitterName (and could be listened to by just listening to the dd-drop-event).

The eventobject

The eventobject has the following properties:


You can also subscribe to only one event: dd-event and use e.dd (which is a Promise) to monitor further action. This Promise gets resolved when the drag-cycle is finished.

If you want to get informed during dragging, you can set up a callback to be informed. This can be done by using e.dd.setCallback(callbackFn). This is made possible, because the Promise is extended.

ITSA.Event.after('dd', function(e) {

    e.dd.setCallback(function() {
        // this code is executed many times during dragging

        function() {
            // this code is executed at the end of the drag-cycle



Draggable items are marked with classes, so dragging is easy to style.

Classes at draggable items


On every HtmlElement during dragging


The master Element that is dragged. Will only be available when multiple HtmlElements are beging dragged and only on 1 HtmlElement (the one the mouse is holding).

API Docs