Monitoring with Promises

Dragging can be monitored by listening to the 'dd' event and use the e.dd Promise. Or for dropzones, listen to 'dropzone-over' and use the e.dropzone 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.

dropzone

drag me

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 spaced"></div>
    <div class="monitor-container"></div>
</body>

<script src="itsabuild-min.js"></script>
<script>
    var monitorContStart = document.getElement('.monitor-container.spaced'),
        monitorContOver = document.getElement('.monitor-container:not(.spaced)');

    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('e.dd.then() --> dropped inside '+dropId);
                }
                else {
                    monitorContStart.append('e.dd.then() --> dropped outside any dropzone');
                }
            }
        );
    });


    ITSA.Event.after('dropzone-over', function(e) {
        var dropId = e.dropTarget.getId();
        monitorContOver.setHTML('dropzone --> dragged over dropzone '+dropId);

        e.dropzone.then(
            function(onDropzone) {
                monitorContOver.append('<br>e.dropzone.then() --> '+(onDropzone ? 'dropped inside ' : 'moved outside ')+dropId);
            }
        );
    });

</script>

API Docs

Examples

Module-documentation

Monitoring with Promises