Module-documentation

version 1.0.0
module: drag
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.

Drag the items to the dropzones. Use the 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

Code-example:

<style type="text/css">
    .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;
    }
</style>
<body>
    <div class="base-container" plugin-dd="true" dd-draggable=".container">
        <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>
</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');
    });
</script>
API Docs