Draggable Image/Div Question w/Border

[theflyingminstr]

Hi utilizing this script http://www.jsmadeeasy.com/javascript...rag_resize.htm I want to know how I can make a border that the draggable image cannot leave.

Example: http://tab-bot.com/div_drag/drag_resize2.html


Thank you

[rdspoons]

If you dont mind adding a quick suppliment to wz_dragdrop.js
the following will work.

1) - add a global bounding box object that contains the coordinates/
dimensions of a drag limiting rectangle: p0=upper-right,
pt1=lower-left.

2) - modify the "dd.obj.moveTo" call in "function DRAG(d_ev)" in
wz_dragdrop.js. The original code is commented out and the
new code tests the newly proposed x,y against the bounding
box points.

3) - this eample is using the fact that "name1" is the id of object 1. You can change
the value "ame1" to any thing you want. If this value is found anywhere in
the drag objects id, the boundary box will be applied. Otherwise the bounding
box will not be used.
Removing the indexOf test will bound all drag objects.

//1 the bounding box
var boundBox={pt0:{x:100,y:60},pt1:{x:600,y:200}};

//2 the new code
/*
	dd.obj.moveTo(
		dd.obj.vertical? dd.obj.x : dd.maxOffX(dd.inWndW(dd.ofx+dd.e.x)-dd.obj.w),
		dd.obj.horizontal? dd.obj.y : dd.maxOffY(dd.inWndH(dd.ofy+dd.e.y)-dd.obj.h)
	);
*/
	var px = (dd.obj.vertical)? dd.obj.x : dd.maxOffX(dd.inWndW(dd.ofx+dd.e.x)-dd.obj.w);
	var py = (dd.obj.horizontal)? dd.obj.y : dd.maxOffY(dd.inWndH(dd.ofy+dd.e.y)-dd.obj.h);
	
	if(dd.obj.id.indexOf("ame1")>-1){	// (3) apply this code only to specific objects.
		if((boundBox.pt0.x>px) || (px>boundBox.pt1.x)){		
			px = dd.obj.x;	//new x not allowed, use old x.
		}
		if((boundBox.pt0.y>py) || (py>boundBox.pt1.y)){
			py = dd.obj.y;	//new y not allowed, use old y.
		}
	}
	dd.obj.moveTo(px,py);

	//...

Tested in ie 7.0.6001.18000, ff 3.0.10, chrome 2.0.172.33, and safari 4 beta(528.16).

[theflyingminstr]

Cool, thanks so much!