Met DCO kunt u eenvoudig verplaatsbare objecten maken met JavaScript. Het enige wat u hoeft te doen is DCO in te laden en het object dat u verplaatsbaar wilt maken erbij aanmelden. Er zijn echter ook classes (ELine, TSlider) die dat al voor u doen in bepaalde situaties.
Deze pagina was eerder gepubliceerd op www.p1servers.uni.cc/DCO/. Deze server is echter slecht beschikbaar. Download het script.
Nadat u een object hebt gemaakt (met HTML of met JavaScript), moet u het registreren om het te kunnen verplaatsen. Gebruik hiervoor de volgende functie:
ID = Drag.Register(oOptions);
Elk object krijgt een registratie-Id, dat u kunt gebruiken om later instellingen te wijzigen. Het object oOptions bevat properties en methods die extra informatie geven over de manier van verplaatsen.
De object-property van het object oOptions bevat het object dat verplaatsbaar wordt gemaakt. Dit is een verplichte eigenschap:
div1 = document.createElement("div");
div1.innerHTML = "Klik hier om mij te verplaatsen!";
Drag.Register({
object : div1
});
Soms wilt u dat het object alleen in een bepaalde richting verplaatsbaar is. Dit wordt bijvoorbeeld gebruikt in TSlider. In dit geval gebruikt u de eigenschap dir. Dit is een string met ofwel de waarde "v" ofwel de waarde "h".
Drag.Register({
object : div1,
dir : "v"
});
Momenteel zijn er drie modes beschikbaar: follow-mouse-pointer (FMp) en click-move-click (CmC) en down-move-up. CmC is standaard.
Drag.Register({
object : div1,
mode : "FMp"
});
Soms wilt u dat een object alleen binnen bepaalde grenzen kan worden verplaatst. In dit geval vult u de limits-property met een of meer van de volgende properties: xLow, xHigh, yLow, yHigh. Als u deze in combinatie met elkaar gebruikt, kunt u een vierkant definieren waarbinnen het object zich mag bewegen.
Drag.Register({
object : div1,
limits : {
xLow : 20,
xHigh : 70
}
});
Nadat het object verplaatst is, wordt onDrag uitgevoerd. Indien u na het verplaatsen een handeling uit wilt voeren, kunt u die aan onDrag toekennen.
Drag.Register({
object : div1,
onDrag : function(){
window.status = "x: " + div1.style.left + " y: " div1.style.top;
}
});
Als u de registratiegegevens van het object met ID i wilt wijzigen, kunt u hier toegang toe vrijgen via: Drag.Collection[i]:
Drag.Collection[5].limits.xHigh +=60;