Module-documentationModule-documentationBy default, any item dropped inside a dropzone will be visible inside the dropzone. To change this, you can subscribe to the before-dd-drop event and preventDefault().
Drag the items to the dropzones.
Code-example:
<style type="text/css">
.dropzone-awake[dz-dropzone] {
border-style: dashed;
}
</style>
<body>
<div class="base-container">
<div class="container" plugin-dd="true" dd-dropzone=".drop-container">drag me nr. 1</div>
<div class="container" plugin-dd="true" dd-dropzone=".drop-container">drag me nr. 2</div>
<div class="container" plugin-dd="true" dd-dropzone=".drop-container">drag me nr. 3</div>
<div class="container" plugin-dd="true" dd-dropzone=".drop-container">drag me nr. 4</div>
<div class="container" plugin-dd="true" dd-dropzone=".drop-container">drag me nr. 5</div>
</div>
<div class="drop-container return" plugin-dz="true"><b>accept and return</b><br></div>
<div class="drop-container absorb" plugin-dz="true"><b>accept and absorb</b><br></div>
</body>
<script src="itsabuild-min.js"></script>
<script>
var returnItem, absorbItem;
returnItem = function(e) {
e.preventDefault();
ITSA.DD.restoreDraggables();
e.dropTarget.append('<br>'+e.target.getText()+' added');
};
absorbItem = function(e) {
e.preventDefault();
// note that we have to remove both the nodes: original e.target
// as well as the draggable: e.copyTarget.
// also note that, when dragging multiple draggables, we have to handle e.relatives
// which is a hash containing all draggable nodes as well as their originals.
e.dropTarget.append('<br>'+e.target.getText()+' added');
e.sourceNode.remove();
e.dragNode.remove();
ITSA.DD._emitDropzoneDrop(e); // fire the dropzone-drop event
};
ITSA.Event.before(
'dd-drop',
returnItem,
function(e) {
return e.dropTarget && e.dropTarget.hasClass('return');
}
);
ITSA.Event.before(
'dd-drop',
absorbItem,
function(e) {
return e.dropTarget && e.dropTarget.hasClass('absorb');
}
);
</script>