Copy items to dropzones using plugins

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.

Copied items are duplicated: once duplicated, they are only movable.

Drag the items to the dropzones. The movable and optional copyable item will be copyable when the Ctrl-key (or cmd-key on a Mac) is pressed.

copyable

movable

movable and optional 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 class="base-container">
        <div class="container">copyable</div>
        <div class="container">movable</div>
        <div class="container">movable and optional copyable</div>
    </div>

    <div class="drop-container">only copied items</div>
    <div class="drop-container">only moved items</div>
    <div class="drop-container">copied and moved items</div>
</body>

<script src="itsabuild-min.js"></script>
<script>
    document.getAll('.container').forEach(
        function(node) {
            var effect,
                innertext = node.getText();
            if (innertext==='copyable') {
                effect = 'copy';
            }
            else if (innertext==='movable') {
                effect = 'move';
            }
            else {
                effect = 'all';
            }
            node.plug(ITSA.Plugins.dd, {'effect-allowed': effect, dropzone: '.drop-container'});
        }
    );

    document.getAll('.drop-container').forEach(
        function(node) {
            var innertext = node.getText(),
                move = (innertext!=='only copied items'),
                copy = (innertext!=='only moved items');
            node.plug(ITSA.Plugins.Dropzone, {
                dropzone: move ? (copy ? 'true' : 'move') : 'copy'
            });
        }
    );

    // 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('movable');
        if (!e.isCopied) {
            e.sourceNode.setText('movable');
        }
    });

</script>

API Docs

Examples

Module-documentation

Copy items to dropzones using plugins