Module-documentation

version 1.0.0
module: drag-drop
maintanance: Marco Asbreuk
home
all modules

Moving multiple items

Multiple items can be dragged at once by specifying e.relatives inside a before-subscriber to the dd-start event. This example uses drag-delegation.

Drag the items to the dropzones. The movable or copyable items will be copyable when the Ctrl-key (or cmd-key on a Mac) is pressed during dragging. Use the same Ctrl/cmd button to select multiple items.

drag me nr. 1
drag me nr. 2
drag me nr. 3
drag me nr. 4
drag me nr. 5
dropzone

Code-example:

<style type="text/css">
    .dropzone-awake[dd-dropzone] {
        border-style: dashed;
    }
    .container.selected {
        border-color: #AAA;
    }

    /* give delegated items the same CSS as [draggable]: */
    .container {
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        float: left;
        position: relative;
    }
    .container:not(.dd-dragging) {
        cursor: default;
    }
    .dropzone-awake[dz-dropzone] {
        border-style: dashed;
    }
</style>
<body>
    <div class="base-container" plugin-dd="true" dd-draggable=".container" dd-dropzone=".drop-container" dd-effect-allowed="all">
        <div class="container">drag me nr. 1</div>
        <div class="container">drag me nr. 2</div>
        <div class="container">drag me nr. 3</div>
        <div class="container">drag me nr. 4</div>
        <div class="container">drag me nr. 5</div>
    </div>

    <div class="drop-container" plugin-dz="true" plugin-dd="true" dd-draggable=".container" dd-dropzone=".drop-container">dropzone</div>
</body>
<script src="itsabuild-min.js"></script>
<script>
    ITSA.Event.before('mousedown', function(e) {
        var ctrlPressed = e.ctrlKey || e.metaKey;
        if (!ctrlPressed) {
            document.getAll('.selected').removeClass('selected');
        }
        e.target.toggleClass('selected');
    }, '.container');

    ITSA.Event.before('mousedownoutside', function(e) {
        document.getAll('.selected').removeClass('selected');
    }, '.container');

    ITSA.Event.before('dd', function(e) {
        e.relatives = document.getAll('.selected');
    });

    ITSA.Event.after('dropzone-drop', function(e) {
        document.getAll('.selected').removeClass('selected');
    });

</script>
API Docs