Mellékelt példa megnyitása előtt szükséges egy WebTips nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
’Drag and Drop’ a HTML lapon
A lap felső részében látható két <DIV> elem közt valósítunk meg vonszolást, melynek eredményeként a FORRÁS területen található szöveg kijelölt része áthúzható a CÉL területre, az oda korábban vonszolt szöveget felülírva.
A vonszolás lehetősége kliens-oldalon megvalósítható, elegendő néhány JScript-függvényt írnunk, és a Drag and Drop műveletben érintett objektumoknak a megfelelő eseményeinek kezelőjeként megadni ezeket.
A forrás elem ondragstart eseményének kezelőjeként megirtunk egy függvényt, doDragStart néven. Ez a pillanat, amikor a kijelölt szövegrész fölött lenyomtuk az egér bal gombját, majd megindultunk a cél objektum felé:
function doDragStart()
{
var data = window.event.dataTransfer;
data.effectAllowed = "copy";
}
A dataTransfer objektum effectAllowed property-jében adhatjuk meg, hogy az adott objektum esetén (jelen esetben a két DIV objektumnál), a vonszolás műveletében milyen effektus engedélyezett. A forrás elem esetén csak másolási („copy”) művelet, hiszen az eredeti szöveget nem kívánjuk törölni.
A cél objektum esetében két eseményre kell függvényt írnunk. Az első az ondrop esemény:
Meghatározzuk a célobjektumot:
var target = window.event.srcElement;
A műveletet:
var data = window.event.dataTransfer;
Egy függvénybe ágyaztuk az esemény visszatérésének FALSE értékre állítását:
A célobjektumban a szöveget tartalmazó property értékét felülírjuk a forrásban kijelölt szöveggel:
target.innerText = data.getData("text");
}
Az előbbi függvényt adjuk meg a cél objektum ondragover eseményének kezelőjeként is:
function doCancelDefault()
{
var dr_event = window.event;
dr_event.returnValue = false;
}
Kép beillesztése
A példa oldalunk alsó régiójában lehetőséget biztosítunk arra, hogy az oldalunkra látogató a megjelenő HTML szöveget helyettesítse egy tetszőleges képpel.
A példa zöld téglalapja egy <div> tag, melyben kijelölve a KÉP szót elérhetjük, hogy egy felbukkanó dialógusablakban kiválasszunk egy képet, majd ezt a kijelölt szó helyére illesszük. Ehhez az oldalon elhelyezett gombra kell kattintani. A gomb doInsertImage kezelőfüggvénye végzi el a műveletet. A kód első részében meghatározzunk a kijelölt szöveget:
function doInsertPicture()
{
var textRange = document.selection.createRange();
...
Majd a kijelölt szöveget reprezentáló TextRange JScript objektumnak meghívjuk az execCommand metódusát. Ennek első paraméterében megadjuk a művelet azonosítóját, mely jelen esetben ’InsertImage’, második paraméterében pedig arról gondoskodunk, hogy megjelenjen egy dialógusablak a kép megadásához:
textRange.execCommand("InsertImage",true);
Végül töröljük a kijelölt területet:
document.selection.empty();
}
A példa alkalmazás mappájában, az ’image’ nevű almappában elhelyeztünk egy képet, mellyel a művelet kipróbálható.