Ben's Hobbyhoekje -- Plaatjes en tekst verplaatsen

Plaatjes en tekst verplaatsen

ICHTHUS

Hierboven zie je een ichthus-visje en een tekst. Als je er met de muis overheen gaat, verandert de cursor in een kruis met pijltjes. Dat duidt er op dat je het plaatje kunt verslepen. Hier wordt besproken hoe je dat doet.
N.B.: Dit werkt niet met een aanraakscherm.

Dit script is oorspronkelijk afkomstig van de website Dynamic Drive. De hier gebruikte versie is een aanpassing/uitbreiding ervan.

De code staat onderaan deze pagina. Je kunt hem ook downloaden, inclusief het plaatje.

Er worden drie items besproken:
1. De code om een plaatje of tekst verplaatsbaar te maken.
2. De bijbehorende HTML-code om een plaatje verplaatsbaar te maken.
3. De bijbehorende HTML-code om een tekst verplaatsbaar te maken.
De code om een plaatje of tekst verplaatsbaar te maken bestaat uit een STYLE-block en een stuk JavaScript. Beide stukken code staan in de HEAD. Daarnaast is er nog de code in de BODY waarmee onderdelen van de pagina worden aangewezen om verplaatsbaar te zijn.
Al deze code staat onderaan de bladzijde.
De werking van het script is -zonder op details in te gaan- als volgt:
- Tijdens de uitvoering van het script wordt de variabele dragapproved steeds opnieuw aangemaakt en op false gezet.
- Als de linkermuisknop wordt ingedrukt wordt, wordt de function drags() aangeroepen. Deze function kijkt of het object waar de muis opstaat van de klasse "drag" is. Als dat het geval is gaat de function verder, anders wordt gestopt.
- De variable dragapproved wordt op true gezet, waarna de huidige plaats van het object wordt bepaald (in de variabelen temp1 en temp2), en de positie van de muis-aanwijzer wordt vastgelegd (in de variabelen x en y).
- Zodra de muis wordt bewogen wordt de function move() aangeroepen. Deze function verplaatst het object.
- Als de muisknop nog is ingedrukt als move() klaar is, wordt onmiddellijk drags() weer aangeroepen. Hierdoor ontstaat het sleep-effect.
- Als de muisknop wordt losgelaten wordt dragapproved gelijk weer false gemaakt, waardoor function drags stopt.
Om een plaatje verplaatsbaar te maken voeg de eenvoudig het attribuut class="drag" toe aan de <IMG>-tag.
Om een tekst verplaatsbaar te maken voeg de eenvoudig het attribuut class="drag" toe aan de tag waarmee je die tekst opmaakt. Dat kan ook een tag zijn zoals <b> of <i>. Voorbeelden:

Paragraph: <p class="drag">....</p>
List-item: <li class="drag">....</li>
Kopje: <h2 class="drag">....</h2>
Soms is het handig om <div>....</div> of <span>....</span> in te zetten om je doel te bereiken.

Zorg er voor dat de tag waarmee je tekst verplaatsbaar maakt altijd wordt afgesloten met een einde tag. Dus na de tag <p class="drag"> volgt altijd een tag </p>. Hiermee voorkom je dat er veel te veel tekst (lees: de rest van de pagina) wordt versleept.
De tag waarin class="drag" voorkomt staat het dichtste bij de tekst, anders werkt het niet. De volgende code is niet goed:
<h2 class="drag">
<div align="center">ICHTHUS</div>
</h2>
Maar dit werkt wel:
<div align="center">
<h2 class="drag">ICHTHUS</h2>
</div>

Gebruik:

De code staat voor een deel in de <HEAD> en voor een deel in de <BODY>.

De code ziet er als volgt uit:

(Zet deze code en dit JavaScript in de <HEAD>)

<style>
.drag {
position:relative; cursor:move }
</style>

<script>

//Generic Drag Script- (c) Dynamic Drive (www.dynamicdrive.com)
//For full source code and terms of usage,
//visit http://www.dynamicdrive.com
// improvements by Ben Boukes (c) 2012, 2015

var temp1, temp2;
var dragapproved = false;
var z,x,y;

function move(e) {
if (dragapproved) {
z.style.left = temp1 + e.clientX - x + "px";
z.style.top = temp2 + e.clientY - y + "px";
return false;
}
}

function drags(e) {
if (!document.getElementById) return;
var firedobj = e.target;
var topelement = "HTML";

while (firedobj.tagName != topelement&&firedobj.className != "drag") {
firedobj = firedobj.parentNode;
}

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

(Zet deze code in de <BODY>, op de plaats waar het plaatje moet komen)

<div align="center">
<img class="drag" src="fish6.gif" border="0" alt="Sleep mij ergens anders heen!" title="Sleep mij ergens anders heen!" width="80" height="26">
</div>

(Zet deze code in de <BODY>, op de plaats waar de tekst moet komen)

<div align="center">
<i><h2 class="drag title="Sleep mij ergens anders heen!">ICHTHUS</h2></i>
</div>

Downloaden:

Druk op de knop: File: voorb088.zip, 2238 bytes.

Opmerking:

Als je deze code gebruikt voor een verplaatsbare tekst en een verplaatsbaar plaatje op dezelfde bladzijde, kun je leuke side-effects maken. Zie onderstaande code, waarin de class drag van het plaatje wordt genest binnen de class drag van de tekst. Hiermee kun je het visje onafhankelijk van de tekst verplaatsen, maar als je de tekst verplaatst gaat het visje mee!

ICHTHUS

<div align="center">
<i><h3 class="drag">
<img class="drag" src="fish6.gif" border="0" alt="Sleep mij ergens anders
heen!" title="Sleep mij ergens anders heen!" width="80" height="26"
align="middle">
ICHTHUS</h3></i>
</div>