Move me, but you can only drop me in one of these containers.
If you try to drop me somewhere other than these containers, I'll just come back.
Item 3.
Item 6.
You can drop me in the left container, otherwise I'll stay here.
Try to click me, dragular distinguish drag from click
Item 5.
// JS
controller('Basic', ['$element', 'dragularService', function TodoCtrl($element, dragularService) {
dragularService('.containerVertical');
}])
// CSS
.clickedClass {
background-color: orange !important;
}
<!-- HTML -->
<div class='wrapper' ng-controller="Basic">
<div class='containerVertical'>
<div>Move me, but you can only drop me in one of these containers.</div>
<div>If you try to drop me somewhere other than these containers, I'll just come back.</div>
<div>Item 3.</div>
<div>Item 6.</div>
</div>
<div class='containerVertical'>
<div>You can drop me in the left container, otherwise I'll stay here.</div>
<div ng-click="clicked = !clicked" ng-class="clicked && 'clickedClass'">Try to click me, dragular distinguish drag from click</div>
<div>Item 5.</div>
</div>
</div>