...

View Full Version : Draggable Image/Div Question w/Border



theflyingminstr
06-29-2009, 06:12 PM
Hi utilizing this script http://www.jsmadeeasy.com/javascripts/DHMTL%20Miscelanious/drag_resize/drag_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
06-29-2009, 08:48 PM
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
06-29-2009, 10:18 PM
Cool, thanks so much!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum