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