scriptaculous drag-drop snap parent & grid

[ThomasJSmart]

Hi im looking for a way to make the scriptaculous dragdrop function snap to a grid aswell as stay inside a parent object.


seperatly this works:

Snap to grid:

new Draggable( 'DDobject', {snap:[151,20]});

constrain to parent:

new Draggable('DDobject',{
		snap: function(x,y,draggable) {
				function constrain(n, lower, upper) {
				if (n > upper) return upper;
				else if (n < lower) return lower;
				else return n;
			  }
		 
		 	 element_dimensions = Element.getDimensions(draggable.element);
		 	 parent_dimensions = Element.getDimensions(draggable.element.parentNode);
		  
		  	return[
				constrain(x, 0, parent_dimensions.width - element_dimensions.width),
				constrain(y, 0, parent_dimensions.height - element_dimensions.height)
			];
		}
	  });

but how to get them together?? if someone could give me a poke in the right direction it would be much apreciated..

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[BillyRayPreachersSon]

If I understand correctly, you want to snap the return coordinates to every 151px horizontally, and every 20px vertically, while remaining inside the parent element.

Assuming your code above correctly does the latter part, I'd guess that the former can be achieved by rounding the X/Y coords to the nearest X/Y grid location.

You should be able to do this fairly simply with this line:

var roundedValue = parseInt(currentValue / gridValue, 10) * gridValue;

So, in your case:

var roundedValue = parseInt(currentValue / 151, 10) * 151;

or

var roundedValue = parseInt(currentValue / 20, 10) * 20;

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[ThomasJSmart]

It wasnt so much the calculation that had me lost but where to put it. iv solved it though

new Draggable( 'DDholder1', {handle:'DDobject1',snap: 
				
				function(x,y,draggable) {
					function constrain(n, lower, upper, dir) {
						if(dir=='x'){
							var moveSnap = Math.round(n/151);
							var n=moveSnap*151;
						}else if(dir=='y'){
							var moveSnap = Math.round(n/21);
							var n=moveSnap*21;
						}
						
						if (n > upper){ 
							return upper;
						}else if (n < lower){
							return lower;
						}else{
							return n;
						}
		              }
					  element_dimensions = Element.getDimensions(draggable.element);              
					  parent_dimensions = Element.getDimensions(draggable.element.parentNode);                        
					  
					  return[                
					  	constrain(x, 0, parent_dimensions.width - element_dimensions.width,'x'),                
						constrain(y, 0, parent_dimensions.height - element_dimensions.height,'y')
						];        
				},
				
				onEnd:function(){setDateTime();}
			
		});

and the result:

http://thomassmart.com/Experiments/dragdropresize/

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!