Dropzones

Draggable items can be dropped inside dropzones. Dronzones are HtmlElements that have the attribute: dropzone="true | move | copy". The attribute-value determines what will be accepted when dropped. The draggable items on the other hand, need the attribute: dd-effect-allowed="all | move | copy" which marks the Element so it can be inspected by the dropzone if it is accepted.

Once a draggable item has a dropzone set, it will return to its original place when it is dropped outside the dropzone.

Drag the items to the dropzones. The items can be copied by pressing the Ctrl- or Cmd-key

drag me

drag me (copyable)

only copied items

only moved items

copied and moved 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-dropzone=".drop-container" dd-effect-allowed="move">drag me</div>
        <div id="without" class="container">drag me (copyable)</div>
    </div>

    <div class="drop-container" plugin-dz="true" dz-dropzone="copy">only copied items</div>
    <div class="drop-container" plugin-dz="true" dz-dropzone="move">only moved items</div>
    <div id="dropzone-without" class="drop-container">copied and moved items</div>
</body>

<script src="itsabuild-min.js"></script>
<script>
    document.getElement('#without').plug('dd', {'effect-allowed': 'all', dropzone: '.drop-container'});
    document.getElement('#dropzone-without').plug('dz');

    // we will change the text of copied items, so that it is clear they are only movable
    ITSA.Event.after('dropzone-drop', function(e) {
        e.dragNode.setText('drag me');
        if (!e.isCopied) {
            e.sourceNode.setText('drag me');
        }
    });

</script>

API Docs

Examples

Module-documentation

Dropzones