jc
10.06.2001, 17:54
Hi!
so I've try to write a drag and drop script based on the recomandation of ScriptGuru. Because i'm beginer in dhtml only the basic work (in ie)
can sombody help me with tath script ??
As you'll see is part of an dhtml api.
Here's a page where you can see the script in action (or in inaction in NS):
http://pageajc.citeglobe.com/dhtml_api/examples/Drag.html
and here's the code:
<pre id=code><font face=courier size=2 id=code>
//state = "start"
newX = 0
newY = 0
Drag = {
enabled : false,
grabbedObj : null,
enable : function()
{
document.onmousemove = Drag.trackMouse;
document.onmouseup=Drag.ungrab
Drag.enabled = true
},
disable : function()
{
document.onmousemove = null;
document.onmouseup= null;
Drag.enabled = false
},
trackMouse : function(e)
{
if(ie){e=event}
//alert("move")
Drag.mouseX = e.clientX
Drag.mouseY = e.clientY
if (Drag.grabbed && Drag.enabled)
{
//state = "draging"
obj = Drag.grabbedObj
newX=(Drag.mouseX + Drag.tempX - Drag.selectX)
newY=(Drag.mouseY + Drag.tempY - Drag.selectY)
minX = obj.DragMinX
maxX = obj.DragMaxX
minY = obj.DragMinY
maxY = obj.DragMaxY
W = obj.getW()
H = obj.getH()
//if (x<l) x=l
//else if (x+w>r) x=r-w
//if (y<t) y=t
//else if (y+h>b) y=b-h
if(minX !=null){if(newX<minX){newX = minX}}
if(minY !=null){if(newY<minY){newY = minY}}
if(maxX !=null){if((newX+W) > maxX){newX = (maxX-W)}}
if(maxY !=null){if((newY+H) > maxY){newY = (maxY-H)}}
obj.setX(newX)
obj.setY(newY)
}
},
grab : function(e)
{
//alert("grab")
//state = "click"
if(ie){e=event}
src = (ie)? e.srcElement : e.target
dragobj = div(src.id)
if(!dragobj) return false
//state ="exist"
if (!dragobj.drag) return false
//state = "grab"
Drag.selectX = e.clientX
Drag.selectY = e.clientY
Drag.tempX = src.style.pixelLeft
Drag.tempY = src.style.pixelTop
Drag.grabbed = true
if (dragobj.isProxy){Drag.grabbedObj=dragobj.proxyFor }
else {Drag.grabbedObj=dragobj}
},
ungrab : function(){
Drag.grabbed=false
Drag.grabbedObj=null
}
}
DynDiv.prototype.enableDrag = function(obj){
//state = "enabled"
//this.setDraglimit(0,0,null,null)
if(obj){
this.haveDragProxy = true
this.DragPoxy = obj
obj.isProxy = true
obj.proxyFor = this
}
obj = obj||this
obj.drag = true
obj.addEvent("mousedown",Drag.grab)
}
DynDiv.prototype.disableDrag = function(){
this.drag = false
this.removeEvent("mousedown",Drag.grab)
}
DynDiv.prototype.setDraglimit=function(minX,minY,m axX,maxY)
{
a=arguments
if(a.length == 1){
if(typeof(a[0])=="object")
{
if(a[0].style){
minX = 0
minY = 0
maxX = a[0].style.offsetWidth
maxY = a[0].style.offsetHeight
}
}
}
this.DragMinX = minX
this.DragMinY = minY
this.DragMaxX = maxX
this.DragMaxY = maxY
}
</font id=code></pre id=code>
Edited by - jc on 06/10/2001 17:48:42
so I've try to write a drag and drop script based on the recomandation of ScriptGuru. Because i'm beginer in dhtml only the basic work (in ie)
can sombody help me with tath script ??
As you'll see is part of an dhtml api.
Here's a page where you can see the script in action (or in inaction in NS):
http://pageajc.citeglobe.com/dhtml_api/examples/Drag.html
and here's the code:
<pre id=code><font face=courier size=2 id=code>
//state = "start"
newX = 0
newY = 0
Drag = {
enabled : false,
grabbedObj : null,
enable : function()
{
document.onmousemove = Drag.trackMouse;
document.onmouseup=Drag.ungrab
Drag.enabled = true
},
disable : function()
{
document.onmousemove = null;
document.onmouseup= null;
Drag.enabled = false
},
trackMouse : function(e)
{
if(ie){e=event}
//alert("move")
Drag.mouseX = e.clientX
Drag.mouseY = e.clientY
if (Drag.grabbed && Drag.enabled)
{
//state = "draging"
obj = Drag.grabbedObj
newX=(Drag.mouseX + Drag.tempX - Drag.selectX)
newY=(Drag.mouseY + Drag.tempY - Drag.selectY)
minX = obj.DragMinX
maxX = obj.DragMaxX
minY = obj.DragMinY
maxY = obj.DragMaxY
W = obj.getW()
H = obj.getH()
//if (x<l) x=l
//else if (x+w>r) x=r-w
//if (y<t) y=t
//else if (y+h>b) y=b-h
if(minX !=null){if(newX<minX){newX = minX}}
if(minY !=null){if(newY<minY){newY = minY}}
if(maxX !=null){if((newX+W) > maxX){newX = (maxX-W)}}
if(maxY !=null){if((newY+H) > maxY){newY = (maxY-H)}}
obj.setX(newX)
obj.setY(newY)
}
},
grab : function(e)
{
//alert("grab")
//state = "click"
if(ie){e=event}
src = (ie)? e.srcElement : e.target
dragobj = div(src.id)
if(!dragobj) return false
//state ="exist"
if (!dragobj.drag) return false
//state = "grab"
Drag.selectX = e.clientX
Drag.selectY = e.clientY
Drag.tempX = src.style.pixelLeft
Drag.tempY = src.style.pixelTop
Drag.grabbed = true
if (dragobj.isProxy){Drag.grabbedObj=dragobj.proxyFor }
else {Drag.grabbedObj=dragobj}
},
ungrab : function(){
Drag.grabbed=false
Drag.grabbedObj=null
}
}
DynDiv.prototype.enableDrag = function(obj){
//state = "enabled"
//this.setDraglimit(0,0,null,null)
if(obj){
this.haveDragProxy = true
this.DragPoxy = obj
obj.isProxy = true
obj.proxyFor = this
}
obj = obj||this
obj.drag = true
obj.addEvent("mousedown",Drag.grab)
}
DynDiv.prototype.disableDrag = function(){
this.drag = false
this.removeEvent("mousedown",Drag.grab)
}
DynDiv.prototype.setDraglimit=function(minX,minY,m axX,maxY)
{
a=arguments
if(a.length == 1){
if(typeof(a[0])=="object")
{
if(a[0].style){
minX = 0
minY = 0
maxX = a[0].style.offsetWidth
maxY = a[0].style.offsetHeight
}
}
}
this.DragMinX = minX
this.DragMinY = minY
this.DragMaxX = maxX
this.DragMaxY = maxY
}
</font id=code></pre id=code>
Edited by - jc on 06/10/2001 17:48:42