473,324 Members | 2,193 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

limiting the drag drop area

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
8 4434
acoder
16,027 Expert Mod 8TB
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
427 Expert 256MB
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
2,476 2GB
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
427 Expert 256MB
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
2,476 2GB
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
16,027 Expert Mod 8TB
Then it would return NaN, see this link.

PS. gone a bit off-topic here.
Jul 18 '08 #7
Himzi
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
16,027 Expert Mod 8TB
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

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

Similar topics

5
by: Clyde | last post by:
I am trying to implement the user feedback provided by Windows Explorer when draggng a filename from one place to another. I have the drag and drop action worked out but have had no luck in...
2
by: Barry Moon | last post by:
Hi Can anyone give me any help with passing an object across processes, via drag and drop? I've written a custom ListView control, which supports dragging and dropping of its items. The...
0
by: CIRE1975 | last post by:
How do I create a drag and drop item on an asp.net web for that will allow my web site consumers to use. I want to have rectangles located on the left of the screen on the web form and allow the end...
0
by: Neven Klofutar | last post by:
Hi, I would like to create something like a "puzzle control" that could use drag and drop technique to put together the "whole picture". I would like to set some fixed areas on the page so when...
5
by: Chris Johnson | last post by:
Hi guys, I'm working on a application that I want to drag a file into, and at the time of dropping, get the full path of the file. But, what I really want is to drag the file to a waiting...
0
by: jongwoonlee | last post by:
Hi, I don't have much experience in c# .net, so please bear with me. I would like to have some advice if possible. the goal is 1. there are several user defined(maybe the existing common...
1
by: kidelectric | last post by:
The issue I am having is that I would like to be able to drag-and-drop div elements that have rounded corners.* Since these elements will be dynamically created (including background color), I could...
2
by: =?Utf-8?B?VHJlY2l1cw==?= | last post by:
Hello, Newsgroupians: I've been looking on the Internet for some resources to create a simple drag-and-drop application, but they all seem too complicated or not what I need. I have created a...
0
by: munishbatra2002 | last post by:
hi all, we are using a gridview and a treeview control ... we want to drag a row from gridview control and drop it onto treeview control on a web page... we are using C# ASP.NET ... can anyone...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.