<h1>Draggabilly - containment with vanilla JS</h1>
<div class="container">
<div class="draggable"></div>
<div class="draggable"></div>
<div class="draggable"></div>
</div>
body { font-family: sans-serif; }
.container {
padding: 10px;
border: 2px solid #F90;
height: 200px;
}
.draggable {
width: 140px;
height: 140px;
background: #F90;
border-radius: 10px;
margin: 0 10px 10px 0;
float: left;
}
.draggable.is-pointer-down {
background: #09F;
z-index: 2; /* above other draggies */
}
.draggable.is-dragging { opacity: 0.7; }
// external js: draggabilly.pkgd.js
// get all draggie elements
var draggableElems = document.querySelectorAll('.draggable');
// array of Draggabillies
var draggies = []
// init Draggabillies
for ( var i=0, len = draggableElems.length; i < len; i++ ) {
var draggableElem = draggableElems[i];
var draggie = new Draggabilly( draggableElem, {
containment: true
});
draggies.push( draggie );
}
External CSS
This Pen doesn't use any external CSS resources.