Joillakin sivuilla on esim. sellaisia toiminnallisuuksia JS:llä tehty, että hiirellä pystyy vaikka liikuttelemaan sivulla olevaa kuvaa tai tekstilaatikkoa ym., niin miten tälläisiä toiminnallisuuksia saadaan aikaan?
Ota jokin sellainen sivu ja katso lähdekoodista, siitähän se selviää. Yleensä CSS-tyyli "position: relative" tai jopa "position: absolute" yhdessä left- ja top-arvojen kanssa auttaa elementin sijainnin asettamisessa.
Onko jokin erityinen kohta, jota et ymmärrä?
jQueryllähän tämä luonnistuu suhteellisen vaivattomasti. Käy vilkaisemassa jQueryn Draggables-dokumentaatiota osoitteessa http://docs.jquery.com/UI/Draggables
Osoitteesta http://interface.eyecon.ro/demos/drag.html löytyypi demoa.
Tai vaikka näin:
luo pics kansio ja lisää koodissa olevat kuvat .gif sinne.
malli: http://fidisk.fi/u/jaanakur/saku/liikuta.php
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
N = (document.all) ? 0 : 1;
var ob;
function MD(e) {
if (N) {
ob = document.layers[e.target.name];
X=e.x;
Y=e.y;
return false;
}
else {
ob = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}
}
function MM(e) {
if (ob) {
if (N) {
ob.moveTo((e.pageX-X), (e.pageY-Y));
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
ob = null;
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<div id="p" style="position:absolute;left:50;top:300;">
<img src=../pics/pata.gif name="p">
</div>
<div id="r" style="position:absolute;left:50;top:350;">
<img src=../pics/ruutu.gif name="r">
</div>
<div id="c" style="position:absolute;left:100;top:300;">
<img src=../pics/risti.gif name="c">
</div>
<div id="h" style="position:absolute;left:100;top:350;">
<img src=../pics/hertta.gif name="h">
</div>
<div id="a" style="position:absolute;left:50;top:200;">
<img src=../pics/pa.gif name="a">
</div>
<div id="b" style="position:absolute;left:50;top:250;">
<img src=../pics/ru.gif name="b">
</div>
<div id="d" style="position:absolute;left:100;top:200;">
<img src=../pics/ri.gif name="d">
</div>
<div id="e" style="position:absolute;left:100;top:250;">
<img src=../pics/he.gif name="e">
</div>
<div id="x" style="position:absolute;left:50;top:100;">
<img src=../pics/pa.gif name="a">
</div>
<div id="y" style="position:absolute;left:50;top:150;">
<img src=../pics/ru.gif name="b">
</div>
<div id="z" style="position:absolute;left:100;top:100;">
<img src=../pics/ri.gif name="d">
</div>
<div id="q" style="position:absolute;left:100;top:150;">
<img src=../pics/he.gif name="e">
</div>
klikkaa jotakin maata, vedä ja pudota haluamaasi paikkaan.<br>
Käytäthän IE 7 selainta.Mitä hyötyä tuosta jos on pakko käyttää IE:tä? Itse en ainakaan jäisi selailemaan sivuille jos olisi pakko käyttää jotain tiettyä selainta, jos selain sattuisi olemaan semmoinen, jota en käytä. Kuten esim. IE.
edit: tai siis tietenkin onhan tuosta vaikka mitä hyötyä varmasti esim. opettelu mielessä tai laajennettaessa toimimaan muissakin versioissa. Mutta en näkisi tuota kovinkaan toimivana ratkaisuna jos toimii yhdessä selaimessa (en testannu toimisko muissa kun IE voi toimiakin). Ainakaan firefoxissa ei toiminut.
https://www.ohjelmointiputka.net/keskustelu/
Tuolta, jos jaksat lähdekoodin ja sieltä vaan ettiä osoitteet.
Aihe on jo aika vanha, joten et voi enää vastata siihen.