Module-documentation

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

Delegated dropzones

Multiple items can be made draggable by specify draggable="css-selector" at a container-Element. Make sure that -when delegate- the delegated items have the same CSS as [draggable] has.

Drag the items, they are all draggable and can be moved or copied into any dropzone.

drag me
drag me
drag me
drag me

Code-example:

<style>
    .dropzone-awake[dd-dropzone] {
        border-style: dashed;
    }

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

    <div class="drop-container" plugin-dd="true" dd-draggable="div" dd-dropzone=".drop-container" dd-effect-allowed="all" plugin-dz="true"></div>
    <div class="drop-container" plugin-dd="true" dd-draggable="div" dd-dropzone=".drop-container" dd-effect-allowed="all" plugin-dz="true"></div>
    <div class="drop-container" plugin-dd="true" dd-draggable="div" dd-dropzone=".drop-container" dd-effect-allowed="all" plugin-dz="true"></div>
</body>
<script src="itsabuild-min.js"></script>
API Docs