PDA

View Full Version : Can some help? W/ "Double-Click Move Script?"

shanek0378
08-14-2002, 07:37 PM
I have a simple Drag and Drop Doll Maker on my web site. Can someone tell me how to convert it to drag-n-drop With Double-click Move? Like they can either move it by dragging it, or they can double click to move it directly to a box on the top of the page.

If you could help, I would greatly appreciate it.

Thanks,
Kellie
x_goose_x
08-15-2002, 01:20 AM
Here's a mod to dynamic drives drag script:


<head>

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

//Generic Drag Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and terms of usage,
//visit http://www.dynamicdrive.com

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
}
}

function dblclk(e){
var jump=ns6? e.target : event.srcElement
if (jump.className=="drag"){
start = jump.getAttribute("startpos")
x = start.substring(0,start.indexOf("-"));
y = start.substring(start.indexOf("-")+1,start.length);
jump.style.left = x;
jump.style.top = y;
}
}

document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>

</head>

<body onDblClick="dblclk(event);">

<img src="swat.GIF" class="drag" startpos="300-500">

<br><br>

<img src="swat.GIF">

</body>
shanek0378
08-15-2002, 01:55 AM
That script had errors, it would drag, but it would get stuck, it would dissapear on double click also. Can you modify this one with just a double-click move, so the image moves on screen, posiably to the middle of the page?

<SCRIPT language=JavaScript1.2>
<!--

//Generic Drag Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and terms of usage,
//visit http://www.dynamicdrive.com

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>
x_goose_x
08-15-2002, 02:43 AM
Sorry, I had blocked the return false when testing and forgot to re-enable them. Before it moved it off the screen, should be fine now tho. Tested on IE6 and MOZ1.0


<head>

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

//Generic Drag Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and terms of usage,
//visit http://www.dynamicdrive.com

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
}
}

function dblclk(e){
var jump=ns6? e.target : event.srcElement
if (jump.className=="drag"){
start = jump.getAttribute("startpos")
x = start.substring(0,start.indexOf("-"));
y = start.substring(start.indexOf("-")+1,start.length);
jump.style.left = x;
jump.style.top = y;
}
}

document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>

</head>

<body onDblClick="dblclk(event);">

<img src="swat.GIF" class="drag" startpos="100-100">

<br><br>

<img src="swat.GIF">

</body>
shanek0378
08-15-2002, 02:52 AM
I fixed the problem with the startpos="300-500"

But' I have a 1000 images I want them all to move to one point at the top of the screen, take a look at what I mean.

http://thedollzrealm.com/thedollmakerz.htm

Goto Girlz, Username: temp Password: temp
and tell me what you think.
x_goose_x
08-15-2002, 02:59 AM
Currently when you doubleclick it moves the image relative to it's start position. If you want it to move it to an absolute position you'll need to set it in the style of the image:

<img src="swat.GIF" class="drag" startpos="0-0" style="position: absolute; top: 100; left: 100;">

But you'll also need to set the initial position absolute as opposed to relative. Cange left and top.
shanek0378
08-15-2002, 03:17 AM
That confused me, is there no way to make a 1000 images goto the same place, without having to make each startpos= or absolute value diff. for each, can they all be the same value?