Monitoring with Promises

Dragging can be monitored by listening to the 'dd' event and use the e.dd Promise.

Note: it is recomended to use this Promise-way instead of subscribing to every single dd-event.

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 monitorContStart = document.getElement('.monitor-container');

    ITSA.Event.after('dd', function(e) {
        monitorContStart.setHTML('dd --> drag started');

        e.dd.setCallback(function() {
            var node = monitorContStart.getElement('.monitor-drag'),
                count;
            if (node) {
                count = node.getData('count')+1;
                node.setData('count', count);
                node.setText('e.dd.callback --> item is dragging: '+count+' callbacks');
            }
            else {
                monitorContStart.append('<p class="monitor-drag">e.dd.callback --> item is dragging: 1 callback</p>');
                node = monitorContStart.getElement('.monitor-drag');
                node.setData('count', 1);
            }
        });

        e.dd.then(
            function() {
                var dropId = e.dropTarget && e.dropTarget.getId();
                if (dropId) {
                    monitorContStart.append('<p>e.dd.then() --> dropped inside '+dropId+'</p>');
                }
                else {
                    monitorContStart.append('<p>e.dd.then() --> dropped outside any dropzone</p>');
                }
            }
        );
    });

</script>

API Docs

Examples

Module-documentation

Monitoring with Promises