Verschil in functies javascript

Status
Niet open voor verdere reacties.
JeroenE

JeroenE

Terugkerende gebruiker
Lid geworden
20 mrt 2005
Berichten
1.950
Hallo,

Ik ben wat aan het prutsen met functies en ben met een pagina bezig waarbij ik een div met de muis wil vastnemen en verplaatsen.

Het lukt me in die mate dat ik, als ik de muis traag beweeg, de div kan verplaatsen, maar van het moment dat ik iets te snel beweeg, blijft de div staan tot ik er weer over ga met de muis.

Mijn pagina

Wat ik echter wil bereiken, is dat de div altijd mee verplaatst, hoe snel ik de muis ook beweeg, zoals op de site van w3schools, en met de manier van functies schrijven zoals ik nu bezig ben en dus niet zoals op w3schools geschreven.
Kortweg dus het resultaat van w3schools met de op mijn eigen manier geschreven functies.

Zoals dit dus

Waar loopt het fout waardoor de div achterblijft?
 
Laatst bewerkt:
106 views en niemand die eens kon melden dat het helemaal niet werkte omdat er elementen ontbraken...
Ik heb ze weer toegevoegd, dus nu werkt het wel.

Misschien is er nu wel iemand die kan helpen.
 
bron zei:
Wow, gisteravond laat gepost en een dag later ongeduldig waar de hulp blijft? Misschien veel kijkers zonder hulp omdat je geen code snippet geeft :rolleyes:
Kijk voor Drag & Drop eens op www.w3schools.com/html/html5_draganddrop.asp
Klik om te vergroten...
Niet ongeduldig waar de hulp blijft, wel ontgoocheld dat niemand liet weten dat er niets werkte :rolleyes:
JeroenE zei:
106 views en niemand die eens kon melden dat het helemaal niet werkte omdat er elementen ontbraken...
Klik om te vergroten...

En voor een snippet van de code is er altijd de hele broncode van de pagina als je die bezoekt. Dan heb je direct alles ;)

Verder is het niet de bedoeling de div op een vooraf bepaalde plaats te droppen zoals op de link die je gaf, maar gelijk waar op de pagina zoals op de tweede link die ik gaf :)
 
Gebruik style.top en style.left om de nieuwe positie te behouden.
Zoals dit http://jsfiddle.net/robertc/kKuqH/ waarbij gebruik wordt gemaakt van de dragstart, dragover en drop event.

Een groot dropveld is handig
Code: 
html, body { margin:0; height:100%; }
#wrapper { min-height:100%; }

<body>
<div id="wrapper">
...
</div>
</body>
 
bron zei:
Gebruik style.top en style.left om de nieuwe positie te behouden.
Zoals dit http://jsfiddle.net/robertc/kKuqH/ waarbij gebruik wordt gemaakt van de dragstart, dragover en drop event.

Een groot dropveld is handig
Code: 
html, body { margin:0; height:100%; }
#wrapper { min-height:100%; }

<body>
<div id="wrapper">
...
</div>
</body>
Klik om te vergroten...

Ga ik proberen, dankjewel.
De link geeft voorlopig echter een bad gateway
 
Het probleem was dat alle gebruikte functies binnen een andere functie moesten staan.

Eerste script dat half werkte:

Code: 
let noffsetx = 0, noffsety = 0

const otraveler = document.getElementById("traveler")

const fmovediv = () => {
	otraveler.onmousedown = (e) => {
		e = e || window.event
		e.preventDefault()
		const atravelerbox = otraveler.getBoundingClientRect()
		noffsetx = noffsetx ? noffsetx : e.pageX - atravelerbox.x
		noffsety = noffsety ? noffsety : e.pageY - atravelerbox.y
		document.getElementById("infodiv").innerHTML = noffsetx + " " + noffsety
		otraveler.onmousemove = (e) => {
			e = e || window.event
			e.preventDefault()
			otraveler.style.left = (e.pageX - noffsetx) + "px"
			otraveler.style.top = (e.pageY - noffsety) + "px"
			document.getElementById("positiondiv").innerHTML = e.pageX + " " + e.pageY + "<br />" + (e.pageX - noffsetx) + " " + (e.pageY - noffsety)
		}
	}
	otraveler.onmouseup = () => {
		otraveler.onmousemove = null
		noffsetx = 0
		noffsety = 0
		setTimeout("document.getElementById('positiondiv').innerHTML = null", 2000)
	}
}

window.onload = fmovediv

Oplossing:
Code: 
const otraveler = document.getElementById("traveler")

const fdragtraveler = (otraveler) => {
	let nmousex = 0, nmousey = 0, ntravelerx = 0, ntravelery = 0
	
	const fdrag = (e) => {
		e = e || window.event
		e.preventDefault()
		nmousex = e.clientX
		nmousey = e.clientY
		document.onmouseup = fstopdrag
		document.onmousemove = fmovetraveler
	}
	
	const fmovetraveler = (e) => {
		e = e || window.event
		e.preventDefault()
		ntravelerx = nmousex - e.clientX
		ntravelery = nmousey - e.clientY
		nmousex = e.clientX
		nmousey = e.clientY
		traveler.style.left = (traveler.offsetLeft - ntravelerx) + "px"
		traveler.style.top = (traveler.offsetTop - ntravelery) + "px"
	}
	
	const fstopdrag = () => {
		document.onmouseup = null
		document.onmousemove = null
	}
	
	traveler.onmousedown = fdrag
}

windows.onload = fdragtraveler
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan