Module-documentationModule-documentationMultiple 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.
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>