JavaScript Tutorial/Drag Drop/Drag Drop Event

Материал из Web эксперт
Версия от 11:24, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Drop target events fire now

<html>
    <head>
        <title>System Drag And Drop Example</title>
        <script type="text/javascript">
            function handleDragDropEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value +=  oEvent.type + "\n";
                switch(oEvent.type) {
                    case "dragover":
                    case "dragenter":
                        oEvent.returnValue = false;
                }
            }
        </script>
    </head>
    <body>
        <P>Try dragging the text from the textbox to the red square.
        Drop target events fire now.</p>
        <P>drag me</p>
        <div style="background-color: red; height: 100px; width: 100px"
             ondragenter="handleDragDropEvent(event)"
             ondragover="handleDragDropEvent(event)"
             ondragleave="handleDragDropEvent(event)"
             ondrop="handleDragDropEvent(event)"></div></p>
        <P><textarea rows="10" cols="25" readonly="readonly" id="txt1"></textarea></p>
    </body>
</html>


Get drag and drop event type: dragenter

<html>
    <head>
        <title>System Drag And Drop Example</title>
        <script type="text/javascript">
            function handleDragDropoEvent(oEvent) {
                switch(oEvent.type) {
                    case "dragenter":
                        oEvent.dataTransfer.dropEffect = "move";
                        break;
                }
            }
        </script>
    </head>
    <body>
        <P>Try dragging the text in the textbox to the right textbox.</p>
        <P><input type="text" value="drag this text" ondragstart="handleDragDropoEvent(event)" />
        <input ondragenter="handleDragDropoEvent(event)"
               ondragover="handleDragDropoEvent(event)"
               ondrop="handleDragDropoEvent(event)">
        </input>
        </p>
    </body>
</html>


Get drag and drop event type: dragover

<html>
    <head>
        <title>System Drag And Drop Example</title>
        <script type="text/javascript">
            function handleDragDropoEvent(oEvent) {
                switch(oEvent.type) {
                    case "dragover":
                        oEvent.returnValue = false;
                        break;
                }
            }
        </script>
    </head>
    <body>
        <P>Try dragging the text in the textbox to the right textbox.</p>
        <P><input type="text" value="drag this text" ondragstart="handleDragDropoEvent(event)" />
        <input ondragenter="handleDragDropoEvent(event)"
               ondragover="handleDragDropoEvent(event)"
               ondrop="handleDragDropoEvent(event)">
        </input>
        </p>
    </body>
</html>


Get drag and drop event type: dragstart

<html>
    <head>
        <title>System Drag And Drop Example</title>
        <script type="text/javascript">
            function handleDragDropoEvent(oEvent) {
                switch(oEvent.type) {
                    case "dragstart":
                        oEvent.dataTransfer.effectAllowed = "move";
                        alert("dragstart");
                        break;
                }
            }
        </script>
    </head>
    <body>
        <P>Try dragging the text in the textbox to the right textbox.</p>
        <P><input type="text" value="drag this text" ondragstart="handleDragDropoEvent(event)" />
        <input ondragenter="handleDragDropoEvent(event)"
               ondragover="handleDragDropoEvent(event)"
               ondrop="handleDragDropoEvent(event)">
        </input>
        </p>
    </body>
</html>


Get drag and drop event type: drop

<html>
    <head>
        <title>System Drag And Drop Example</title>
        <script type="text/javascript">
            function handleDragDropoEvent(oEvent) {
                switch(oEvent.type) {
                    case "drop":
                        oEvent.returnValue = false;
                        oEvent.srcElement.innerHTML = oEvent.dataTransfer.getData("text");
                }
            }
        </script>
    </head>
    <body>
        <P>Try dragging the text in the textbox to the right textbox.</p>
        <P><input type="text" value="drag this text" ondragstart="handleDragDropoEvent(event)" />
        <input ondragenter="handleDragDropoEvent(event)"
               ondragover="handleDragDropoEvent(event)"
               ondrop="handleDragDropoEvent(event)">
        </input>
        </p>
    </body>
</html>


Get text object from dataTransfer defined the Drag and drop event

<html>
    <head>
        <title>System Drag And Drop Example</title>
        <script type="text/javascript">
            function handleDragDropEvent(oEvent) {
                switch(oEvent.type) {
                    case "dragover":
                    case "dragenter":
                        oEvent.returnValue = false;
                        break;
                    case "drop":
                        alert(oEvent.dataTransfer.getData("text"));
                }
            }
        </script>
    </head>
    <body>
        <P>show you the selected text when dropped.</p>
        <P><input type="text" value="drag this text" />
        <input type="test"
             ondragenter="handleDragDropEvent(event)"
             ondragover="handleDragDropEvent(event)"
             ondrop="handleDragDropEvent(event)"></input></p>
    </body>
</html>


Get URL object from dataTransfer defined the Drag and drop event

<html>
    <head>
        <title>System Drag And Drop Example</title>
        <script type="text/javascript">
            function handleDragDropEvent(oEvent) {
                switch(oEvent.type) {
                    case "dragover":
                    case "dragenter":
                        oEvent.returnValue = false;
                        break;
                    case "drop":
                        alert(oEvent.dataTransfer.getData("URL"));
                }
            }
        </script>
    </head>
    <body>
        <P>Try dragging the link to the red square.
        It will show you the URL when dropped.</p>
        <P><a href="http://www.wbex.ru">www.wbex.ru</a>
        <input type="text"
             ondragenter="handleDragDropEvent(event)"
             ondragover="handleDragDropEvent(event)"
             ondrop="handleDragDropEvent(event)"></div></p>
    </body>
</html>


No drop target events fire

<html>
    <head>
        <title>System Drag And Drop Example</title>
        <script type="text/javascript">
            function handleDragDropEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value +=  oEvent.type + "\n";
            }
        </script>
    </head>
    <body>
        <P>Try dragging the text from the textbox to the red square.
        No drop target events fire.</p>
        <P>Drag me</p>
        <div style="background-color: red; height: 100px; width: 100px"
             ondragenter="handleDragDropEvent(event)"
             ondragover="handleDragDropEvent(event)"
             ondragleave="handleDragDropEvent(event)"
             ondrop="handleDragDropEvent(event)"></div></p>
        <P><textarea rows="10" cols="25" id="txt1"></textarea></p>
    </body>
</html>