Module-documentationModule-documentationDrag 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.
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><script>
var DD = ITSA.DD;
DD.init(); // DD is actually delivered by the drag-drop module which extends drag
</script>This module makes HtmlElement draggable in a very easy way, no clientside rendering:
based upon HTMLconstrainedPromise to be notified when readymultiple items at oncehandles where draggable items can be pickes upclasses, so dragging is easy to styleDraggable 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>
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.
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>
</div>
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
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.
document.getElement('#someNode').plug('dd');
document.getElement('#someNode').unplug('dd');
document.getElement('#someNode').plug(
'dd',
{
emitter: 'redItem',
handle: 'h1'
}
);
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 -->
</div>
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.
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 has the following properties:
before-subscriber of the dd-event to inform which nodes are related to the draggable node and should be dragged as well.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
});
e.dd.then(
function() {
// this code is executed at the end of the drag-cycle
}
);
});
Draggable items are marked with classes, so dragging is easy to style.
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).