Monitoring with events

Dragging can be monitored using the dd, dd-drag and dd-drop events.

Note: it is highly recommended to use the Promised-way instead of this example.

Drag the item and watch for the events.

drag me

Code-example:

<body>
    <div class="container" plugin-dd="true" dd-effect-allowed="all">drag me</div>
    <div class="monitor-container"></div>
</body>

<script src="itsabuild-min.js"></script>
<script>
    var monitorCont = document.getElement('.monitor-container');

    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) {
        monitorCont.append('<p>dd-drop --> drag has finished</p>');
    });

</script>

API Docs

Examples

Module-documentation

Monitoring with events