JavaScript中实现拖放功能的演示代码

最新推荐文章于 2022-03-04 00:42:19 发布

原创最新推荐文章于 2022-03-04 00:42:19 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #textbox #html #div #url

Ajax技术专栏收录该内容

103 篇文章

订阅专栏

本文详细介绍了HTML5中的拖放操作，包括拖动项事件、放置目标事件及数据传输对象dataTransfer的使用方法，并通过多个实例展示了如何实现文本、链接等元素的拖动效果。

注意：以下代码在Windows下的IE中得到良好的支持,以外的浏览器不一定支持。

先来看拖动项事件，代码如下：

<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 image.</p> <p><img src="images/smiley.gif" alt="" ondragstart="handleDragDropEvent(event)" ondrag="handleDragDropEvent(event)" ondragend="handleDragDropEvent(event)" /></p> <p><textarea rows="10" cols="25" readonly="readonly" id="txt1"></textarea></p> </body> </html>

说明：

当某个项被拖动时，会依次触发以下事件：

(1)dragstart

(2)drag

(3)dragend

接着来看放置目标事件：

<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 left textbox to the right one.</p> <p><input type="text" value="drag this text" /> <input type="text" ondragenter="handleDragDropEvent(event)" ondragover="handleDragDropEvent(event)" ondragleave="handleDragDropEvent(event)" ondrop="handleDragDropEvent(event)" /></p> <p><textarea rows="10" cols="25" readonly="readonly" id="txt1"></textarea></p> </body> </html>

说明：

事件触发顺序为：

(1)dragenter

(2)ondragover

若最终移除目标项触发

(3)ondragleave

成功移入则触发

(4)ondrop

创建自己的放置目标：

<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><input type="text" value="drag this text" ondragstart="handleDragDropEvent(event)" ondrag="handleDragDropEvent(event)" ondragend="handleDragDropEvent(event)" /> <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>

再来研究下数据传输对象:dataTransfer

<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>Try dragging the text from the textbox to the red square. It will show you the selected text when dropped.</p> <p><input type="text" value="drag this text" /> <div style="background-color: red; height: 100px; width: 100px" ondragenter="handleDragDropEvent(event)" ondragover="handleDragDropEvent(event)" ondrop="handleDragDropEvent(event)"></div></p> </body> </html>

再看一下例子：

<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.wrox.com" target="_blank">Wrox Home Page</a> <div style="background-color: red; height: 100px; width: 100px" ondragenter="handleDragDropEvent(event)" ondragover="handleDragDropEvent(event)" ondrop="handleDragDropEvent(event)"></div></p> </body> </html>

最后再看看真正的拖动实现代码：

1.数据拖动

<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"; break; case "dragenter": oEvent.dataTransfer.dropEffect = "move"; break; case "dragover": oEvent.returnValue = false; break; 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 red square. The text will be "moved" to the red square.</p> <p><input type="text" value="drag this text" ondragstart="handleDragDropoEvent(event)" /> <div style="background-color: red; height: 100px; width: 100px" ondragenter="handleDragDropoEvent(event)" ondragover="handleDragDropoEvent(event)" ondrop="handleDragDropoEvent(event)"></div> </p> </body> </html>

2.数据拷贝

<html> <head> <title>System Drag And Drop Example</title> <script type="text/javascript"> function handleDragDropEvent(oEvent) { switch(oEvent.type) { case "dragstart": oEvent.dataTransfer.effectAllowed = "copy"; break; case "dragenter": oEvent.dataTransfer.dropEffect = "copy"; oEvent.returnValue = false; break; case "dragover": oEvent.returnValue = false; break; 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 red square. The text will be "copied" to the red square.</p> <p><input type="text" value="drag this text" ondragstart="handleDragDropEvent(event)" /> <div style="background-color: red; height: 100px; width: 100px" ondragenter="handleDragDropEvent(event)" ondragover="handleDragDropEvent(event)" ondrop="handleDragDropEvent(event)"></div> </p> </body> </html>

3.dragDrop方法演示(可用于几乎所有的HTML元素)

<html> <head> <title>System Drag And Drop Example</title> <script type="text/javascript"> function handleMouseMove(oEvent) { if (oEvent.button == 1) { oEvent.srcElement.dragDrop(); } } function handleDragDropEvent(oEvent) { oEvent.dataTransfer.setData("text", "This is a red square"); } </script> </head> <body> <p>Try dragging the red square into the textbox.</p> <p><div style="background-color: red; height: 100px; width: 100px" onmousemove="handleMouseMove(event)" ondragstart="handleDragDropEvent(event)">This is a red square</div> </p> <p><input type="text" value="" /></p> </body> </html>

4.URL拖动至浏览器URL并跳转

<html> <head> <title>System Drag And Drop Example</title> <script type="text/javascript"> function handleMouseMove(oEvent) { if (oEvent.button == 1) { oEvent.srcElement.dragDrop(); } } function handleDragDropEvent(oEvent) { oEvent.dataTransfer.setData("URL", "http://www.wrox.com/"); } </script> </head> <body> <p>Try dragging the red square into another browser window.</p> <p><div style="background-color: red; height: 100px; width: 100px" onmousemove="handleMouseMove(event)" ondragstart="handleDragDropEvent(event)">http://www.wrox.com</div> </p> </body> </html>