EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Curtis on June 12, 2012, 09:45:16 AM



Title: Draggable "snap-to-grid/element" possible?
Post by: Curtis on June 12, 2012, 09:45:16 AM
Hello.
I have a (hopefully) quick question.
Does EasyUI override the snap-to-grid/element functionality found in the default jQuery UI draggable interaction?
Any way to get it back, if so?


Thanks,
Curtis


Reference: http://jqueryui.com/demos/draggable/#snap-to


Title: Re: Draggable "snap-to-grid/element" possible?
Post by: stworthy on June 13, 2012, 01:45:06 AM
The 'snap-to-grid/element' is not built-in functionality in current version. The example below shows how to implement the 'snap-to-grid' functionality:
Code:
<div id="dd" style="width:300px;height:300px;border:1px solid #ccc"></div>
Code:
$(function(){
$('#dd').draggable({
onStartDrag:function(e){
e.data.lastLeft = e.data.left;
e.data.lastTop = e.data.top;
},
onDrag:function(e){
var dx = Math.floor((e.data.left-e.data.lastLeft)/20)*20;
var dy = Math.floor((e.data.top-e.data.lastTop)/20)*20;
if (Math.abs(dx)>=20){
e.data.lastLeft += dx;
}
if (Math.abs(dy)>=20){
e.data.lastTop += dy;
}
$(this).css({
left:e.data.lastLeft,
top:e.data.lastTop
});
return false;
},
onStopDrag:function(e){
$(this).css({
left:e.data.lastLeft,
top:e.data.lastTop
})
}
})
})


Title: Re: Draggable "snap-to-grid/element" possible?
Post by: Curtis on June 13, 2012, 09:51:34 AM
Awesome and thanks.
I greatly appreciate it.