Emitter-dropzones

Draggable items can be dropped inside dropzones. When these dronzones are specified with emittername="somename", then they only accept draggable items with this specified emitterName. The draggable items can be labelled through the attribute dd-emittername="somename" to identify the emitter.

Both the draggable items as well as dropzones can be setup using javascript as well. This is done with the red-item. The second blue-item gets its emitterName on the fly by subscribing to the dd-start event.

Drag the items to the dropzones..

only blue items

only red items

Code-example:

<style type="text/css">
    .dropzone-awake[dz-dropzone] {
        border-style: dashed;
    }
</style>

<body>
    <div id="constr" class="base-container">
        <div class="container" plugin-dd="true" dd-emitter="blue"></div>
        <div id="without-emitter" class="container" plugin-dd="true"></div>
        <div id="without" class="container"></div>
    </div>

    <div class="drop-container" plugin-dz="true" dz-dropzone="emitter=blue">only blue items</div>
    <div id="dropzone-without" class="drop-container">only red items</div>
</body>

<script src="itsabuild-min.js"></script>
<script>
    document.getElement('#without').plug('dd', {emitter: 'red'});
    document.getElement('#without-emitter').plug('dd');
    document.getElement('#dropzone-without').plug('dz', {dropzone: 'true emitter=red'});

    ITSA.Event.before('dd', function(e) {
        e.emitter = "blue";
        console.info('SETTING EMITTER');
    }, '#without-emitter');

</script>

API Docs

Examples

Module-documentation

Emitter-dropzones