Module-documentationModule-documentationDraggable 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.
Code-example:
<style type="text/css">
.container {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
float: left;
position: relative;
}
.dropzone-awake[dz-dropzone] {
border-style: dashed;
}
</style>
<body>
<div class="base-container" plugin-dd="true" dd-draggable=".container" dd-dropzone=".drop-container" >
<div class="container" dd-effect-allowed="copy">copyable</div>
<div class="container" dd-effect-allowed="move">movable</div>
<div class="container" dd-effect-allowed="all">movable and optional 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 class="drop-container" plugin-dz="true" dz-dropzone="true">copied and moved items</div>
</body>
<script src="itsabuild-min.js"></script>
<script>
// 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>