PDA

Click to See Complete Forum and Search --> : How can I control dragging image?

yphasukyued
12-11-2003, 01:28 PM
I got the JS for Dragging the image from this forum.
How can I control ON and OFF for this dragging with button?

Here is the JS:

<html>
<head>
<title></title>
<style>
<!--
.drag{position:relative;cursor:hand}
-->
</style>
<script language="JavaScript1.2">
<!--

var ie=document.all
var ns6=document.getElementById&&!document.all

var dragapproved=false
var z,x,y

function move(e){
if (dragapproved){
z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
return false
}
}

function drags(e){
if (!ie&&!ns6)
return
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"

while (firedobj.tagName!=topelement&&firedobj.className!="drag"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.className=="drag"){
dragapproved=true
z=firedobj
temp1=parseInt(z.style.left+0)
temp2=parseInt(z.style.top+0)
x=ns6? e.clientX: event.clientX
y=ns6? e.clientY: event.clientY
document.onmousemove=move
return false
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")

//-->
</script>

</head>

<body>
<form name=DragTest>
<input type="image" src="Portrait.jpg" class="drag">
</form>
</body>
</html>
ray326
12-11-2003, 08:05 PM
Add another variable like

var dragok=false

and then use

if (firedobj.className=="drag"){
dragapproved=dragok

instead of true.

Finally, use a button or checkbox to determine wheter dragok is true or false.
yphasukyued
12-12-2003, 12:26 PM
Thanks Ray326, Could you please show me with the sample for BUTTON? Sorry I'm not a programmer yet.

__
Yut
ray326
12-12-2003, 12:39 PM
I fiddled with it last night and a checkbox is really clean because you can just say

dragapproved=document.f.cbname.checked

A button would have to do something like

<input type="button" onclick="dragok = dragok ? false : true">

I.e., it would toggle the state of the dragok flag.
yphasukyued
12-12-2003, 01:14 PM
Thank you very much for your time. I will try it.

____
Yut
ray326
12-12-2003, 11:10 PM
This is what I was playing with.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>dragger</title>
<style>
<!--
.drag { position:relative; cursor:hand }
img { display: block; }
-->
</style>
<script language="JavaScript1.2" type="text/javascript">
<!--

var ie = document.all
var ns6 = document.getElementById && !document.all

var dragapproved=false
var z,x,y

function move(e)
{
if (dragapproved)
{
z.style.left = ns6 ? temp1+e.clientX-x : temp1+event.clientX-x
z.style.top = ns6 ? temp2+e.clientY-y : temp2+event.clientY-y
document.DragTest.xloc.value = parseInt(z.style.left)
document.DragTest.yloc.value = parseInt(z.style.top)
return false
}
}

function drags(e)
{
if (!ie && !ns6)
return
var firedobj = ns6? e.target : event.srcElement
var topelement = ns6? "HTML" : "BODY"

while (firedobj.tagName != topelement && firedobj.className != "drag")
{
firedobj = ns6 ? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.className=="drag")
{
dragapproved = document.DragTest.draggable.checked
z = firedobj
temp1 = parseInt(z.style.left + 0)
temp2 = parseInt(z.style.top + 0)
x=ns6 ? e.clientX : event.clientX
y=ns6 ? e.clientY : event.clientY
document.onmousemove = move
return false
}
}

//-->
</script>
</head>
<body onmousedown = "drags()">
<form name="DragTest" onsubmit="dragapproved=false;return false">
<p>Enable Drag
<input type="checkbox" name="draggable">
</p>
<input type="image" src="images/ptamove.jpg" class="drag">
<p>
xloc = <input type="text" name="xloc" value="0">
yloc = <input type="text" name="yloc" value="0">
</p>
</form>
</body>
</html>
yphasukyued
12-15-2003, 07:39 AM
Thanks ray326, It work perfected.

____
Yut