Draggable
Al een tijdje maak ik gebruik van de jQuery library om div's sleepbaar te maken, maar ik ken de basis van JavaScript nog niet goed, dus wil ik ipv jQuery nu alleen nog maar proberen om JavaScript te gebruiken. Wat dus betekend dat ik op zoek moet naar een andere manier om div's sleepbaar te maken.
Nu dacht ik eraan om de jQuery om te zetten / vertalen naar gewoon JavaScript. Daarvoor had ik dit al gevonden: http://jquery-ui.googlecode.com/svn-history/r3103/trunk/ui/ui.draggable.js
Nu wil ik graag weten of dit wel mogelijk is, en zo niet, of er een ander script is die dit mogelijk maakt (in JavaScript, maar wel met de mogelijkheden die jQuery ook biedt)
Alvast bedankt!
- Hoe ga je opvangen dat iemand zijn muis ingedrukt houdt als hij sleept en dat je de div niet meer gaat verplaatsen als iemand zijn muis loslaat? (tip kijk eens naar de onmouse* events)
- Welk event wordt er aangeroepen als je de muis verplaatst? (ook een onmouse* event)
- Wat gebeurd er eigenlijk met de div als ik hem met mijn muis verplaats? Op welke plaatsen staat die de hele tijd?
maximum 100 left
maximum 100 top
dan worden de breedte en de hoogte er niet bij opgeteld. Dus als ik een div niet uit scherm wil laten gaan, dan moet ik als maximum zoiets doen: breedte van het scherm - breedte van de div, alleen zie ik zo snel niet waar ik dit moet toepassen:
www.avickum.nl/test/drag.php
(Code kun je gewoon in de broncode zien)
En ik heb ook PHP geleerd puur door scripts te kopieeëren, aan te passen, en zo uiteindelijk leren hoe het werkt. Dus ik hoop dat dat met JavaScript ook zo kan gaan.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
!function() { // hier begint de functie
var elems = document.querySelectorAll('[data-moveable]'); // Volgens mij selecteert dit alle divs met het id data-moveable en zet ze in een array?
[].forEach.call(elems, function(elem) { // doorloopt de array..
elem.style.position = 'absolute'; // zet de position op absolute
document.onmousedown = function() { // als er op de div is geklikt
elem.dataset.click = 1;
};
document.onmouseup = function() { // als de muis word losgelaten
elem.dataset.click = 0;
};
document.onmousemove = function(e) { // als de muis wordt bewogen
if (1 == elem.dataset.click) { // als er is geklikt
elem.style.left = e.pageX + 'px'; // zet left naar de x positie van de muis
elem.style.top = e.pageY + 'px'; // zet top naar de y positie van de muis
}
};
});
}();
var elems = document.querySelectorAll('[data-moveable]'); // Volgens mij selecteert dit alle divs met het id data-moveable en zet ze in een array?
[].forEach.call(elems, function(elem) { // doorloopt de array..
elem.style.position = 'absolute'; // zet de position op absolute
document.onmousedown = function() { // als er op de div is geklikt
elem.dataset.click = 1;
};
document.onmouseup = function() { // als de muis word losgelaten
elem.dataset.click = 0;
};
document.onmousemove = function(e) { // als de muis wordt bewogen
if (1 == elem.dataset.click) { // als er is geklikt
elem.style.left = e.pageX + 'px'; // zet left naar de x positie van de muis
elem.style.top = e.pageY + 'px'; // zet top naar de y positie van de muis
}
};
});
}();
regel 1 - dit is een IFFI, een self executing anonymous function. Dit betekend dat deze functie vanzelf wordt aangeroepen. Dit is te vergelijken met dit in PHP:
Hierdoor creëer je een scope waardoor variabele die ergens anders op de pagina ingesteld zijn niet deze code bewerken of andersom.
regel 3 - hier selecteer ik alle elementen met het attribuut data-moveable
regel 7 - niet als er op een div is geklikt, maar als er in het document wordt geklikt. Op de div is: elem.onclick. Document is een algemeen object die voor de hele pagina staat. Die elem variabele komt uit de parameter van de functie die we in forEach stopte.
Tevens wordt deze functie alleen aangeroepen als de muisknop beneden is, mousedown, dat is wat anders dan onclick.
regel 10 - hierin stellen we het data-click attribuut in met een waarde 1, waardoor we weten dat de muis beneden is.
regel 13 - als de muis wordt losgelaten stellen we 0 als data-click attribuut in.
regel 16 - als de data-click attribuut de waarde 1 bevat en de muis dus ingedrukt is
Je hebt waarschijnlijk wel door dat we iets aan het verspringen van de div moet doen bij regel 17 en 18. Verzin eens een methode dat je de positie van de div kunt aanpassen relatief aan de plek waar de cursor naartoe wijst door van die X en Y waarde wat bij te tellen of af te trekken.