EasyUI Forum
September 14, 2025, 03:38:10 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Draggable "snap-to-grid/element" possible?  (Read 13292 times)
Curtis
Newbie
*
Posts: 2


View Profile
« 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
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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
})
}
})
})
Logged
Curtis
Newbie
*
Posts: 2


View Profile
« Reply #2 on: June 13, 2012, 09:51:34 AM »

Awesome and thanks.
I greatly appreciate it.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!