Module-documentationModule-documentationDragging can be monitored using the dd, dd-drag, dd-over, dd-out, dd-drop and dd-dropzone events.
Note: it is highly recommended to use the Promised-way instead of this example.
Drag the item and watch for the events.
Code-example:
<style type="text/css">
.dropzone-awake[dz-dropzone] {
border-style: dashed;
}
</style>
<body>
<div id="dropzone-1" class="drop-container" plugin-dz="true">dropzone</div>
<div class="container" plugin-dd="true" dd-dropzone=".drop-container" dd-effect-allowed="all">drag me</div>
<div class="monitor-container"></div>
<div class="monitor-container dz"></div>
</body>
<script src="itsabuild-min.js"></script>
<script>
var monitorCont = document.getElement('.monitor-container'),
monitorContDropzone = document.getElement('.monitor-container.dz');
//=======================================================================
ITSA.Event.after('dd', function(e) {
monitorCont.setHTML('dd --> drag started');
});
ITSA.Event.after('dd-drag', function(e) {
var node = monitorCont.getElement('.monitor-drag'),
count;
if (node) {
count = node.getData('count')+1;
node.setData('count', count);
node.setText('dd-drag --> item is dragging: '+count+' events');
}
else {
monitorCont.append('<p class="monitor-drag">dd-drag --> item is dragging: 1 event</p>');
node = monitorCont.getElement('.monitor-drag'),
node.setData('count', 1);
}
});
ITSA.Event.after('dd-drop', function(e) {
var dropId = e.dropTarget && e.dropTarget.getId();
if (dropId) {
monitorCont.append('after dd-drop --> inside '+dropId+'<br>');
}
else {
monitorCont.append('after dd-drop --> outside any dropzone<br>');
}
});
//=======================================================================
ITSA.Event.after(['dropzone-over', 'dropzone-out', 'dropzone-drop'], function(e) {
monitorContDropzone.append(((e.type==='dd-drop') ? 'after ' : '')+e.type+' --> '+e.target.getId()+'<br>');
});
</script>