<HTML>
<HEAD>
<TITLE>Procedury obsugi zdarze zwizane z przeciganiem</TITLE>
<STYLE TYPE="text/css">
TD {text-align:center}
TH {text-decoration:underline}
.blanks {text-decoration:underline}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
var timer
function setupDrag() {
    if (event.srcElement.tagName != "TD") {
        // nie mona przeciga innych elementw
        event.returnValue = false
    } else {
        // przygotowanie do przekazania tablicy danych
        var passedData = [event.srcElement.innerText, event.srcElement.className]
        // tablic zapisujemy jako acuch znakw
        event.dataTransfer.setData("Text", passedData.join(":"))
        event.dataTransfer.effectAllowed = "copy"
        timer = new Date()
    }
}
function timeIt() {
    if (event.srcElement.tagName == "TD" && timer) {
        if ((new Date()) - timer > 2000) {
            alert("Przepraszamy - za dugo. Sprbuj jeszcze raz.")
            timer = 0
        }
    }
}
function handleDrop() {
    var elem = event.srcElement
    var passedData = event.dataTransfer.getData("Text")
    var errMsg = ""
    if (passedData) {
        // zamiana przekazanego acucha znakw na tablic
        passedData = passedData.split(":")
        if (elem.id == "blank1") {
            if (passedData[1] == "noun") {
                event.dataTransfer.dropEffect = "copy"
                event.srcElement.innerText = passedData[0]
            } else {
                errMsg = "Nie mona umieci przymiotnika w miejscu przeznaczonym na 
                rzeczownik."
            }
        } else if (elem.id == "blank2") {
            if (passedData[1] == "adjective") {
                event.dataTransfer.dropEffect = "copy"
                event.srcElement.innerText = passedData[0]
            } else {
                errMsg = "Nie mona umieci rzeczownika w miejscu przeznaczonym na 
                przymiotnik."
            }
        }
        if (errMsg) {
            alert(errMsg)
        }
    }
}
function cancelDefault() {
    if (event.srcElement.id.indexOf("blank") == 0) {
        event.dataTransfer.dropEffect = "copy"
        event.returnValue = false
    }
}
</SCRIPT>
</HEAD>
<BODY onDragStart="setupDrag()" onDrag="timeIt()">
<H1>Procedury obsugi zdarze zwizanych z przeciganiem</H1>
<HR>
<P>Twoim celem jest przecignicie jednego rzeczownika
i jednego przymiotnika, i umieszczenie ich w odpowiednich 
miejscach zdania. Wybierz sowo z tabeli i przecignij 
je w wybrane, puste miejsce zdania. Sowo pojawi si 
w zdaniu po zwolnieniu przycisku myszy. Przeciganie 
kadego ze sw nie moe trwa duej ni dwie sekundy.</P>

<TABLE CELLPADDING=5>
<TR><TH>Rzeczowniki</TH><TH>Przymiotniki</TH></TR>
<TR><TD class="noun">ciarwka</TD><TD class="adjective">okrga</TD></TR>
<TR><TD class="noun">lalka</TD><TD class="adjective">czerwona</TD></TR>
<TR><TD class="noun">pika</TD><TD class="adjective">adna</TD></TR>
</TABLE>

<P ID="myP" onDragEnter="cancelDefault()" onDragOver="cancelDefault()" 
onDrop="handleDrop()">
Patrycja powiedziaa, "O rany, ale ta <SPAN ID="blank1" CLASS="blanks">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SPAN> 
jest <SPAN ID="blank2" CLASS="blanks">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SPAN>!"</P>

<BUTTON onClick="location.reload()">Wyczy zdanie</BUTTON>
</BODY>
</HTML>