Im using jQuery UI/Draggable with a collide add on.-- The desired behavior is that there is an area of a page that allows a user to drag and drop a "widget" anywhere they want but the widgets should not be allowed to overlap even while dragging.
The collide seems to be working as when you drag one element close to another they kind of bump but if you drag them around a bit you can make one overlap the next and drop it underneath or above it. - While this seems a little unreasonable I have a 'demand' that this not happen.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.collide.js"></script>
My draggable code looks like this:
$("#widget-container .widget").draggable( {
delay: 100,
containment: '#widget-container',
stack: '.widget',
collide: 'block',
scroll: false,
stop: function () {
// save my widget position
}
});
My markup looks like this
<div id="widget-container" style="
height
:
590px
;
z-index
:
3
;">
<div class="widget" style="background:red;height:100px;width:100px;position:absolute; z-index:4;"></div>
<div class="widget" style="background:lime;height:110px;width:110px;position:absolute; z-index:4;"></div>
</div>