JavaScript Tutorial/Drag Drop/Drag Drop Event — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Текущая версия на 11:24, 26 мая 2010
Содержание
- 1 Drop target events fire now
- 2 Get drag and drop event type: dragenter
- 3 Get drag and drop event type: dragover
- 4 Get drag and drop event type: dragstart
- 5 Get drag and drop event type: drop
- 6 Get text object from dataTransfer defined the Drag and drop event
- 7 Get URL object from dataTransfer defined the Drag and drop event
- 8 No drop target events fire
Drop target events fire now
<source lang="javascript">
<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>
Try dragging the text from the textbox to the red square. Drop target events fire now.
drag me
</p><textarea rows="10" cols="25" readonly="readonly" id="txt1"></textarea>
</body>
</html></source>
Get drag and drop event type: dragenter
<source lang="javascript">
<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>
Try dragging the text in the textbox to the right textbox.
<input type="text" value="drag this text" ondragstart="handleDragDropoEvent(event)" /> <input ondragenter="handleDragDropoEvent(event)" ondragover="handleDragDropoEvent(event)" ondrop="handleDragDropoEvent(event)"> </input>
</body>
</html></source>
Get drag and drop event type: dragover
<source lang="javascript">
<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>
Try dragging the text in the textbox to the right textbox.
<input type="text" value="drag this text" ondragstart="handleDragDropoEvent(event)" /> <input ondragenter="handleDragDropoEvent(event)" ondragover="handleDragDropoEvent(event)" ondrop="handleDragDropoEvent(event)"> </input>
</body>
</html></source>
Get drag and drop event type: dragstart
<source lang="javascript">
<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>
Try dragging the text in the textbox to the right textbox.
<input type="text" value="drag this text" ondragstart="handleDragDropoEvent(event)" /> <input ondragenter="handleDragDropoEvent(event)" ondragover="handleDragDropoEvent(event)" ondrop="handleDragDropoEvent(event)"> </input>
</body>
</html></source>
Get drag and drop event type: drop
<source lang="javascript">
<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>
Try dragging the text in the textbox to the right textbox.
<input type="text" value="drag this text" ondragstart="handleDragDropoEvent(event)" /> <input ondragenter="handleDragDropoEvent(event)" ondragover="handleDragDropoEvent(event)" ondrop="handleDragDropoEvent(event)"> </input>
</body>
</html></source>
Get text object from dataTransfer defined the Drag and drop event
<source lang="javascript">
<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>
show you the selected text when dropped.
<input type="text" value="drag this text" /> <input type="test" ondragenter="handleDragDropEvent(event)" ondragover="handleDragDropEvent(event)" ondrop="handleDragDropEvent(event)"></input>
</body>
</html></source>
Get URL object from dataTransfer defined the Drag and drop event
<source lang="javascript">
<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>
Try dragging the link to the red square. It will show you the URL when dropped.
<a href="http://www.wbex.ru">www.wbex.ru</a> <input type="text" ondragenter="handleDragDropEvent(event)" ondragover="handleDragDropEvent(event)" ondrop="handleDragDropEvent(event)"></div>
</body>
</html></source>
No drop target events fire
<source lang="javascript">
<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>
Try dragging the text from the textbox to the red square. No drop target events fire.
Drag me
</p><textarea rows="10" cols="25" id="txt1"></textarea>
</body>
</html></source>