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
8 4434
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.
you need an routine in the onmouseup section of the handler.
something like -
var limit= [10,10,100,100]; // = (x1,y1,x2,y2)
-
var ts= this.style.
-
if(parseInt(ts.left)< limit[0]){ ts.left = limit[0] +"px"; } //too far left
-
if(parseInt(ts.left)> limit[2]){ ts.left = limit[2] +"px"; } //too far right
-
if(parseInt(ts.top)< limit[1]){ ts.top = limit[1] +"px"; } //too far up
-
if(parseInt(ts.top)> limit[3]){ ts.top = limit[3] +"px"; } //too far down
-
you need an routine in the onmouseup section of the handler.
something like -
var limit= [10,10,100,100]; // = (x1,y1,x2,y2)
-
var ts= this.style.
-
if(parseInt(ts.left)< limit[0]){ ts.left = limit[0] +"px"; } //too far left
-
if(parseInt(ts.left)> limit[2]){ ts.left = limit[2] +"px"; } //too far right
-
if(parseInt(ts.top)< limit[1]){ ts.top = limit[1] +"px"; } //too far up
-
if(parseInt(ts.top)> limit[3]){ ts.top = limit[3] +"px"; } //too far down
-
ts.left can be parsed 2 a number, because it contains "xx"+"px" ?
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
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?
Then it would return NaN, see this link.
PS. gone a bit off-topic here.
This is the drag method i coded : - var dragobject={
-
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
-
initialize:function(){
-
document.onmousedown=this.drag
-
document.onmouseup=function(){this.dragapproved=0}
-
},
-
drag:function(e){
-
var evtobj=window.event? window.event : e
-
this.targetobj=window.event? event.srcElement : e.target
-
if (this.targetobj.className=="drag"){
-
this.dragapproved=1
-
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
-
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
-
this.offsetx=parseInt(this.targetobj.style.left)
-
this.offsety=parseInt(this.targetobj.style.top)
-
this.x=evtobj.clientX
-
this.y=evtobj.clientY
-
if (evtobj.preventDefault)
-
evtobj.preventDefault()
-
document.onmousemove=dragobject.moveit
-
}
-
},
-
moveit:function(e){
-
var evtobj=window.event? window.event : e
-
if (this.dragapproved==1){
-
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
-
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
-
-
return false
-
}
-
}
-
}
-
-
dragobject.initialize()
-
So i need to find out the co-ordinates of all the divs and then limit the mouse drag ?
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.
Sign in to post your reply or Sign up for a free account.
Similar topics
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
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...
|
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...
|
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...
|
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)...
|
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...
|
by: Defcon1945 |
last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
|
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...
|
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...
| |