注意:以下代碼在Windows下的IE中得到良好的支援,以外的瀏覽器不一定支援。
先來看拖動項事件,代碼如下:
<html><br /> <head><br /> <title>System Drag And Drop Example</title><br /> <script type="text/javascript"><br /> function handleDragDropEvent(oEvent) {<br /> var oTextbox = document.getElementById("txt1");<br /> oTextbox.value += oEvent.type + "/n";<br /> }<br /> </script><br /> </head><br /> <body><br /> <p>Try dragging the image.</p><br /> <p><img src="images/smiley.gif" alt=""<br /> ondragstart="handleDragDropEvent(event)" ondrag="handleDragDropEvent(event)"<br /> ondragend="handleDragDropEvent(event)" /></p><br /> <p><textarea rows="10" cols="25" readonly="readonly" id="txt1"></textarea></p></p><p> </body><br /></html>
說明:
當某個項被拖動時,會依次觸發以下事件:
(1)dragstart
(2)drag
(3)dragend
接著來看放置目標事件:
<html><br /> <head><br /> <title>System Drag And Drop Example</title><br /> <script type="text/javascript"><br /> function handleDragDropEvent(oEvent) {<br /> var oTextbox = document.getElementById("txt1");<br /> oTextbox.value += oEvent.type + "/n";<br /> }<br /> </script><br /> </head><br /> <body><br /> <p>Try dragging the text from the left textbox to the right one.</p><br /> <p><input type="text" value="drag this text" /><br /> <input type="text" ondragenter="handleDragDropEvent(event)"<br /> ondragover="handleDragDropEvent(event)" ondragleave="handleDragDropEvent(event)"<br /> ondrop="handleDragDropEvent(event)" /></p><br /> <p><textarea rows="10" cols="25" readonly="readonly" id="txt1"></textarea></p><br /> </body><br /></html>
說明:
事件觸發順序為:
(1)dragenter
(2)ondragover
若最終移除目標項觸發
(3)ondragleave
成功移入則觸發
(4)ondrop
建立自己的放置目標:
<html><br /> <head><br /> <title>System Drag And Drop Example</title><br /> <script type="text/javascript"><br /> function handleDragDropEvent(oEvent) {<br /> var oTextbox = document.getElementById("txt1");<br /> oTextbox.value += oEvent.type + "/n";<br /> //建立自己的放置目標<br /> switch(oEvent.type) {<br /> case "dragover":<br /> case "dragenter":<br /> oEvent.returnValue = false;<br /> }<br /> //建立自己的放置目標<br /> }<br /> </script><br /> </head><br /> <body><br /> <p>Try dragging the text from the textbox to the red square.<br /> Drop target events fire now.</p><br /> <p><input type="text" value="drag this text"<br /> ondragstart="handleDragDropEvent(event)" ondrag="handleDragDropEvent(event)"<br /> ondragend="handleDragDropEvent(event)" /><br /> <div style="background-color: red; height: 100px; width: 100px"<br /> ondragenter="handleDragDropEvent(event)" ondragover="handleDragDropEvent(event)"<br /> ondragleave="handleDragDropEvent(event)" ondrop="handleDragDropEvent(event)"></div></p><br /> <p><textarea rows="10" cols="25" readonly="readonly" id="txt1"></textarea></p><br /> </body><br /></html>
再來研究下資料轉送對象:dataTransfer
<html><br /> <head><br /> <title>System Drag And Drop Example</title><br /> <script type="text/javascript"><br /> function handleDragDropEvent(oEvent) {</p><p> switch(oEvent.type) {<br /> case "dragover":<br /> case "dragenter":<br /> oEvent.returnValue = false;<br /> break;<br /> case "drop":<br /> alert(oEvent.dataTransfer.getData("text"));<br /> }<br /> }<br /> </script><br /> </head><br /> <body><br /> <p>Try dragging the text from the textbox to the red square.<br /> It will show you the selected text when dropped.</p><br /> <p><input type="text" value="drag this text" /><br /> <div style="background-color: red; height: 100px; width: 100px"<br /> ondragenter="handleDragDropEvent(event)"<br /> ondragover="handleDragDropEvent(event)"<br /> ondrop="handleDragDropEvent(event)"></div></p></p><p> </body><br /></html>
再看一下例子:
<html><br /> <head><br /> <title>System Drag And Drop Example</title><br /> <script type="text/javascript"><br /> function handleDragDropEvent(oEvent) {</p><p> switch(oEvent.type) {<br /> case "dragover":<br /> case "dragenter":<br /> oEvent.returnValue = false;<br /> break;<br /> case "drop":<br /> alert(oEvent.dataTransfer.getData("URL"));<br /> }<br /> }<br /> </script><br /> </head><br /> <body><br /> <p>Try dragging the link to the red square.<br /> It will show you the URL when dropped.</p><br /> <p><a href="http://www.wrox.com" target="_blank">Wrox Home Page</a><br /> <div style="background-color: red; height: 100px; width: 100px"<br /> ondragenter="handleDragDropEvent(event)"<br /> ondragover="handleDragDropEvent(event)"<br /> ondrop="handleDragDropEvent(event)"></div></p></p><p> </body><br /></html>
最後再看看真正的拖動實現代碼:
1.資料拖動
<html><br /> <head><br /> <title>System Drag And Drop Example</title><br /> <script type="text/javascript"><br /> function handleDragDropoEvent(oEvent) {</p><p> switch(oEvent.type) {<br /> case "dragstart":<br /> oEvent.dataTransfer.effectAllowed = "move";<br /> break;</p><p> case "dragenter":<br /> oEvent.dataTransfer.dropEffect = "move";<br /> break;</p><p> case "dragover":<br /> oEvent.returnValue = false;<br /> break;<br /> case "drop":<br /> oEvent.returnValue = false;<br /> oEvent.srcElement.innerHTML = oEvent.dataTransfer.getData("text");<br /> }<br /> }<br /> </script><br /> </head><br /> <body><br /> <p>Try dragging the text in the textbox to the red square.<br /> The text will be "moved" to the red square.</p><br /> <p><input type="text" value="drag this text" ondragstart="handleDragDropoEvent(event)" /><br /> <div style="background-color: red; height: 100px; width: 100px"<br /> ondragenter="handleDragDropoEvent(event)"<br /> ondragover="handleDragDropoEvent(event)"<br /> ondrop="handleDragDropoEvent(event)"></div><br /> </p></p><p> </body><br /></html>
2.資料拷貝
<html><br /> <head><br /> <title>System Drag And Drop Example</title><br /> <script type="text/javascript"><br /> function handleDragDropEvent(oEvent) {</p><p> switch(oEvent.type) {<br /> case "dragstart":<br /> oEvent.dataTransfer.effectAllowed = "copy";<br /> break;</p><p> case "dragenter":<br /> oEvent.dataTransfer.dropEffect = "copy";<br /> oEvent.returnValue = false;<br /> break;</p><p> case "dragover":<br /> oEvent.returnValue = false;<br /> break;</p><p> case "drop":<br /> oEvent.returnValue = false;<br /> oEvent.srcElement.innerHTML = oEvent.dataTransfer.getData("text");<br /> }<br /> }<br /> </script><br /> </head><br /> <body><br /> <p>Try dragging the text in the textbox to the red square.<br /> The text will be "copied" to the red square.</p><br /> <p><input type="text" value="drag this text" ondragstart="handleDragDropEvent(event)" /><br /> <div style="background-color: red; height: 100px; width: 100px"<br /> ondragenter="handleDragDropEvent(event)"<br /> ondragover="handleDragDropEvent(event)"<br /> ondrop="handleDragDropEvent(event)"></div><br /> </p></p><p> </body><br /></html>
3.dragDrop方法示範(可用於幾乎所有的HTML元素)
<html><br /> <head><br /> <title>System Drag And Drop Example</title><br /> <script type="text/javascript"></p><p> function handleMouseMove(oEvent) {<br /> if (oEvent.button == 1) {<br /> oEvent.srcElement.dragDrop();<br /> }<br /> }</p><p> function handleDragDropEvent(oEvent) {<br /> oEvent.dataTransfer.setData("text", "This is a red square");<br /> }<br /> </script><br /> </head><br /> <body><br /> <p>Try dragging the red square into the textbox.</p><br /> <p><div style="background-color: red; height: 100px; width: 100px"<br /> onmousemove="handleMouseMove(event)"<br /> ondragstart="handleDragDropEvent(event)">This is a red square</div> </p><br /> <p><input type="text" value="" /></p><br /> </body><br /></html>
4.URL拖動至瀏覽器URL並跳轉
<html><br /> <head><br /> <title>System Drag And Drop Example</title><br /> <script type="text/javascript"></p><p> function handleMouseMove(oEvent) {<br /> if (oEvent.button == 1) {<br /> oEvent.srcElement.dragDrop();<br /> }<br /> }</p><p> function handleDragDropEvent(oEvent) {<br /> oEvent.dataTransfer.setData("URL", "http://www.wrox.com/");<br /> }<br /> </script><br /> </head><br /> <body><br /> <p>Try dragging the red square into another browser window.</p><br /> <p><div style="background-color: red; height: 100px; width: 100px"<br /> onmousemove="handleMouseMove(event)"<br /> ondragstart="handleDragDropEvent(event)">http://www.wrox.com</div> </p><br /> </body><br /></html>