Notifikationer

Markér alle som læst Log ud

jytte Nybegynder

28. september 2003 - 23:58 Der er 22 kommentarer og
1 løsning

Simplere end drag and drop

Jeg har et javascript hvor man kan klikke på et billede og så længe man holder musetasten nede kan man dragge billedet og når man så slippermusetasten droppes billedet.

Men det synes jeg ikke er brugervenligt nok.

Så er der nogen der kan henvise til et javascript der kan gøre følgede i stedet:

når man klikker på billedet "klistre det til curseren" (også hvis man slipper musetasten) og droppes først når man igen klikker på musen.

Synes godt om

nak-m Nybegynder

29. september 2003 - 02:36 #1

her er et eksempel:

<script language="JavaScript" type="text/javascript">
var x=y=o=null;
if (document.layers){
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
window.onmousedown=down, window.onmousemove=move;
} else if (document.all){
document.onmousedown=down, document.onmousemove=move;
}
function down(e){
if (o == null) {
if (document.all && window.event.srcElement.parentElement){
o=window.event.srcElement.parentElement, x=window.event.offsetX, y=window.event.offsetY;
} else {
if (document.layers) {
if (document.layers['o'+e.target.name]) {
o=document.layers['o'+e.target.name], x=e.layerX, y=e.layerY;
} else {
return true;
}
}
}
} else if (o) {
o = null;
}
}
function move(e) {
if (document.all && o)
o.style.posLeft=window.event.clientX-x, o.style.posTop=window.event.clientY-y;
else if (document.layers && o)
o.left=e.pageX-x, o.top=e.pageY-y;
return false;
}
</script>

og billede:
<div id="o1" style="position:absolute; left:0; top:0; width:75;">
<img src="pic1.jpg" name="1" width="376" height="241" alt="">
</div>

men det skulle være rimeligt nemt at lave i din egen kode. Jeg går ud fra at du har en variabel i koden der enten er true (når man dragger) og false (når billedet er droppet). Så kan du jo bare sige (når man klikker på billedet): hvis variabel er false så kør dragfunktionen og hvis den er true så gør den false. Prøv at kigge på mit kodeeksempel hvis du ikke helt forstår hvad jeg mener. Eller spørg :)

Synes godt om

jytte Nybegynder

29. september 2003 - 11:07 #2

Det ser rigtig godt ud!
Men jeg skal lige have det til at virke sammen med det jeg selv har.
Ved du om det f.eks. også kan komme til at virke i Mozilla ?

if (document.layers){
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
window.onmousedown=down, window.onmousemove=move;
}
else {
if (document.all){
document.onmousedown=down, document.onmousemove=move;
}
else {
//HVAD SKAL DER STÅ HER ???
}
}

Synes godt om

lklingenberg Nybegynder

29. september 2003 - 11:20 #3

funktionen virker i:
IE 6.0
Opera 7.11

funktionen virker _ikke_ i:
Mozilla Firebird 0.6.1
Opera 5.02
Mozilla 1.4
Netscape 7.1
K-Meleon 0.7.1

Synes godt om

jytte Nybegynder

29. september 2003 - 12:36 #4

> lklingenberg

ved du så tilfældigvis også om det kan lade sig gøre at justere i nak-m´s kode så den vil virke i flere browsere ?

Synes godt om

lklingenberg Nybegynder

29. september 2003 - 12:42 #5

nix - jeg er ikke noget JavaScript haj. Jeg fandt bare scriptet interessant og ville teste det i forskellige browsere. Sorry.

Synes godt om

nak-m Nybegynder

29. september 2003 - 15:00 #6

kigger lige på at få lavet en kode der er kompatibel med de forskellige browsere :) tager nok lige et øjeblik...

Synes godt om

nak-m Nybegynder

29. september 2003 - 18:05 #7

ups glemte lige at smide koden...

denne virker i hvert fald på ie og ns:

<html>
<head>
<style>
.billede {
position:absolute;
left:10px;
top:10px;
width:100px;
height:100px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
N = (document.all) ? 0 : 1;
var ob;
var over = true;
function down(e){
if (over) {
if (tit) {
if (N) {
ob = document.getElementById("billede");
X=e.layerX;
Y=e.layerY;
return false;
} else {
ob = document.getElementById("billede");
ob = ob.style;
X=event.offsetX;
Y=event.offsetY;
}
}
} else if (!over) {
ob = false;
}
}
function move(e) {
if (ob) {
if (N) {
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
} else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = down;
document.onmousemove = move;
</script>
</head>
<body>
<div id="billede" onMouseOver="tit=true" onMouseOut="tit=false" onClick="if(!over){over=true;}else

if(over){over=false;}" class="billede">
<img src="pic1.jpg" alt="">
</div>
</body>
</html>

Synes godt om

nak-m Nybegynder

29. september 2003 - 18:10 #8

ups en lille fejl

her:

<html>
<head>
<style>
.billede {
position:absolute;
left:10px;
top:10px;
width:100px;
height:100px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
N = (document.all) ? 0 : 1;
var ob;
var tit;
var over = true;
function down(e){
if (over) {
if (tit) {
if (N) {
ob = document.getElementById("billede");
X=e.layerX;
Y=e.layerY;
return false;
} else {
ob = document.getElementById("billede");
ob = ob.style;
X=event.offsetX;
Y=event.offsetY;
}
}
} else if (!over) {
ob = false;
}
}
function move(e) {
if (ob) {
if (N) {
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
} else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = down;
document.onmousemove = move;
</script>
</head>
<body>
<div id="billede" onMouseOver="tit=true" onMouseOut="tit=false" onClick="if(!over){over=true;}else if(over){over=false;}" class="billede">
<img src="pic1.jpg" alt="">
</div>
</body>
</html>

Synes godt om

lklingenberg Nybegynder

29. september 2003 - 18:49 #9

jeg oplever desværre samme browserproblemer

Synes godt om

nak-m Nybegynder

29. september 2003 - 19:04 #10

duer det ikke ved dig?
heller ikke i netscape?

Synes godt om

nak-m Nybegynder

29. september 2003 - 19:10 #11

altså, jeg ved det duer i netscape 7.1 ... så hvis det ikke dur for dig der gør du noget forkert.

Synes godt om

lklingenberg Nybegynder

29. september 2003 - 19:30 #12

nej, jeg gjorde ikke noget forkert - problemet var doctype, hvor jeg anvender HTML 4.01 strict og med den konfiguration virker scriptet ikke.

Synes godt om

nak-m Nybegynder

29. september 2003 - 21:07 #13

det er jo også at gøre noget forkert så :)

Synes godt om

lklingenberg Nybegynder

29. september 2003 - 21:37 #14

det kan vel diskuteres... ;-)

Synes godt om

nak-m Nybegynder

30. september 2003 - 12:53 #15

lklingenberg: men duer den til alle browsere hvis man ikke bruger doctype?

Synes godt om

lklingenberg Nybegynder

30. september 2003 - 13:10 #16

Hvis man helt fjerner !doctype (ikke tilrådeligt) virker funktionen i:
IE 6.0
Opera 7.11
Mozilla Firebird 0.6.1
Mozilla 1.4
Netscape 7.1
K-Meleon 0.7.1

men _ikke_ i:
Opera 5.02

Synes godt om

nak-m Nybegynder

01. oktober 2003 - 11:40 #17

Så må man jo bare opgradere til 7.11, hva? ;)
Men hvad siger du, jytte? kan du bruge koden?

Synes godt om

jytte Nybegynder

01. oktober 2003 - 13:27 #18

Jeg har lige nogle forståelsesproblemer

er det korrekt at den første kode du postede tog hensyn til gamle netscape, mens den nye kun tager hensyn til nye browsere ? ---

Synes godt om

jytte Nybegynder

01. oktober 2003 - 13:31 #19

Desværre er den kode jeg skal rette i noget mere kompliceret idet der både er flere billeder der skal kunne flyttes på og de skal kunne droppes i de rigtige "kasser".

Mit største problem er lige nu hvad jeg gør når jeg i Mozilla ikke kan få lov til at skrive event . Jeg troede bare jeg kunne erstatte event.srcElement med event.target, men det er tilsyneladende event den ikke forstår ...

Synes godt om

jytte Nybegynder

01. oktober 2003 - 13:37 #20

nak-m>
Da din kode vist må siges at løse mit spørgsmål må jeg hellere give dig pointene (uanset om du kan svare på mit tillægsspørgsmål eller ej)

Synes godt om

nak-m Nybegynder

01. oktober 2003 - 19:48 #21

hvad skal koden gøre helt præcist?

Synes godt om

nak-m Nybegynder

01. oktober 2003 - 19:48 #22

(takker mange mange gange for point)

Synes godt om

jytte Nybegynder

03. oktober 2003 - 13:17 #23

Jeg har noget kode a la

if (document.all && event.srcElement.parentElement) {
if (event.srcElement.parentElement.id?true:false) {
...
end if
else
if (event.target.parentElement.id?true:false) {
...
end if
end if

og mit problem er at i else-delen vil det ikke virke i Mozilla da den ikke forstår event ...

Det er vist lidt for kompliceret at forklare hele virkemåden af scriptet her

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS