Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Draggable Image/Div Question w/Border

    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

  • #2
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    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.

    Code:
    //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).

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cool, thanks so much!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •