By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,598 Members | 1,897 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,598 IT Pros & Developers. It's quick & easy.

limiting the drag drop area

P: 9
Hi,
I have made a webpage with 3 divs and have put images / text on these pages which can be dragged. I want to limit the area in which the user can drag the text. The user will be allowed to drag the text from the left div to the center div but not the right div. Can some one please help me understand how this can be done?

Thanks,
Himzi
Jul 17 '08 #1
Share this Question
Share on Google+
8 Replies


acoder
Expert Mod 15k+
P: 16,027
What have you managed so far? You only need to check the position and not move the element any further once it reaches the boundary.
Jul 17 '08 #2

rnd me
Expert 100+
P: 427
you need an routine in the onmouseup section of the handler.

something like

Expand|Select|Wrap|Line Numbers
  1. var limit= [10,10,100,100]; // = (x1,y1,x2,y2)
  2. var ts=  this.style.
  3. if(parseInt(ts.left)< limit[0]){ ts.left = limit[0] +"px"; } //too far left
  4. if(parseInt(ts.left)> limit[2]){ ts.left = limit[2] +"px"; } //too far right
  5. if(parseInt(ts.top)< limit[1]){ ts.top = limit[1] +"px"; } //too far up
  6. if(parseInt(ts.top)> limit[3]){ ts.top = limit[3] +"px"; } //too far down
  7.  
Jul 18 '08 #3

dmjpro
100+
P: 2,476
you need an routine in the onmouseup section of the handler.

something like

Expand|Select|Wrap|Line Numbers
  1. var limit= [10,10,100,100]; // = (x1,y1,x2,y2)
  2. var ts=  this.style.
  3. if(parseInt(ts.left)< limit[0]){ ts.left = limit[0] +"px"; } //too far left
  4. if(parseInt(ts.left)> limit[2]){ ts.left = limit[2] +"px"; } //too far right
  5. if(parseInt(ts.top)< limit[1]){ ts.top = limit[1] +"px"; } //too far up
  6. if(parseInt(ts.top)> limit[3]){ ts.top = limit[3] +"px"; } //too far down
  7.  

ts.left can be parsed 2 a number, because it contains "xx"+"px" ?
Jul 18 '08 #4

rnd me
Expert 100+
P: 427
ts.left can be parsed 2 a number, because it contains "xx"+"px" ?
can it? yes, parseInt discards right-side non digit chars.

parseInt("54px")// ==54
Jul 18 '08 #5

dmjpro
100+
P: 2,476
can it? yes, parseInt discards right-side non digit chars.

parseInt("54px")// ==54
Only it discards only right side non-digits?
Does it do in between or left side non-digits?
Jul 18 '08 #6

acoder
Expert Mod 15k+
P: 16,027
Then it would return NaN, see this link.

PS. gone a bit off-topic here.
Jul 18 '08 #7

P: 9
This is the drag method i coded :


Expand|Select|Wrap|Line Numbers
  1. var dragobject={
  2. z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
  3. initialize:function(){
  4. document.onmousedown=this.drag
  5. document.onmouseup=function(){this.dragapproved=0}
  6. },
  7. drag:function(e){
  8. var evtobj=window.event? window.event : e
  9. this.targetobj=window.event? event.srcElement : e.target
  10. if (this.targetobj.className=="drag"){
  11. this.dragapproved=1
  12. if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
  13. if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
  14. this.offsetx=parseInt(this.targetobj.style.left)
  15. this.offsety=parseInt(this.targetobj.style.top)
  16. this.x=evtobj.clientX
  17. this.y=evtobj.clientY
  18. if (evtobj.preventDefault)
  19. evtobj.preventDefault()
  20. document.onmousemove=dragobject.moveit
  21. }
  22. },
  23. moveit:function(e){
  24. var evtobj=window.event? window.event : e
  25. if (this.dragapproved==1){
  26. this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
  27. this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
  28.  
  29. return false
  30. }
  31. }
  32. }
  33.  
  34. dragobject.initialize()
  35.  
So i need to find out the co-ordinates of all the divs and then limit the mouse drag ?
Jul 18 '08 #8

acoder
Expert Mod 15k+
P: 16,027
Not all of them, just the right side of the center div, and if you have a limit on the left, then the left co-ordinates too.
Jul 19 '08 #9

Post your reply

Sign in to post your reply or Sign up for a free account.