<!DOCTYPE HTML><html> <meta charset="utf8"> <head> <style> body { font-size: 14px; } h2 { margin: 0; } .dropBox { min-height: 50px; } ul, ol { margin: 0; } table { width: 100%; border: 1px solid black; margin-bottom: 10px; /* 將單元格之間的間距設為0 */ border-spacing: 0; } table th, table td { border: 1px solid black; padding: 5px; } .readOnly { margin: 5px; padding: 3px; color: white; background-color: gray; border-radius: 5px; font-size: 10px; font-weight: bold; } </style> <script> function onDropOver() { //默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。 event.PReventDefault(); } function onDrop() { if(event.type !== "drop") { return; } //取消默認的處理方式 event.preventDefault(); //刪除所有子元素 event.target.innerHTML = ""; var dt = event.dataTransfer; for(var i=0; i<dt.types.length; i++) { var type = dt.types[i]; var data = event.dataTransfer.getData(type); console.log(type); console.log(data); if(i != 0) { event.target.innerHTML += "<br>" } //以下2種方式都是設置純文本,無法換行 //event.target.textContent = data; //event.target.appendChild(document.createTextNode(data)); event.target.innerHTML += ( "types.length = " + dt.types.length + "<br>" + (i + 1) + ".type : " + type + "<br> data : " ); switch(type) { case "Files": event.target.innerHTML += ("file length = " + dt.files.length); for(var j=0; j<dt.files.length; j++) { var file = dt.files[j]; console.log(file); event.target.innerHTML += ("<br> " + j + ". " + file.name + ", 大小: " + file.size + "字節, 上次修改時間: " + new Date(file.lastModified) + ", 類型: " + file.type); } break; default: event.target.innerHTML += data; } } console.log(dt); } function onDragStartEffect() { var dt = event.dataTransfer; //注意:數據類型最好小寫,即使有大寫字符也會被自動轉為小寫的 dt.setData("dropEffect", event.srcElement.innerHTML); //effectAllowed默認是uninitialized,指定允許那種drop效果,如果只允許一種效果，那么不用設置dropEffect 就會自動使用該效果 dt.effectAllowed = event.srcElement.innerHTML; } function onDragStartPlain() { event.dataTransfer.setData("text/plain", event.target.innerHTML); } function onDragStartLink() { var dt = event.dataTransfer; //目前還沒找到傳遞多個uri的方法.因為注釋前面的換行符會被轉義,其它的被丟棄;使用其它字符來分割也差不多,注釋前面的被轉義,其它的保持不變 //var urlList = ["http://www.example.com", "#A second link", "http://blog.csdn.net/chy555chy"].join("/n"); //var urlList = ["http://www.example.com", "https://www.baidu.com", "http://blog.csdn.net/chy555chy"].join("/n"); var urlList = "http://www.example.com"; dt.setData("text/uri-list", urlList); dt.setData("text/plain", event.target.innerHTML); } function onDragStartHtml() { var dt = event.dataTransfer; dt.setData("text/html", "Hello there, <strong>stranger</strong>"); dt.setData("text/plain", "Hello there, stranger"); } function onDragStartCustom() { var dt = event.dataTransfer; //據我多次實驗,setData會自動將非文本轉化成文本 dt.setData("custom", "custom"); //方法一: var img1 = document.getElementById("img"); //設置拖動時顯示的圖像相對鼠標的位置 dt.setDragImage(img1, 0, 0); /* //方法二:以下兩種創建方式都是一樣的 var img2 = new Image(); //var img2 = document.createElement("img"); img2.src = "https://www.baidu.com/img/bd_logo1.png"; //這里幾種改變image大小的方法都是無效的 img2.width = "50px"; img2.height = "30px"; img2.width = 50; img2.height = 30px"; img2.style.width="50px"; img2.style.height="30px"; dt.setDragImage(img2, 0, 0); */ } </script> </head> <body> <p>MDN dataTransfer part: <a target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer</a></p> <p>MDN event part: <a target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API</a></p> <p>MDN effectAllowed part: <a target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed</a></p> <p>MDN drag type part: <a target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types</a></p> <h2>dataTransfer properties</h2> <table> <tr> <th>Property</td> <th>Description</td> </tr> <tr> <td>dropEffect</td> <td>Gets the type of drag-and-drop Operation currently selected or sets the operation to a new type. The value must be none, copy, link or move.</td> </tr> <tr> <td>effectAllowed</td> <td>Provides all of the types of operations that are possible. Must be one of none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized.</td> </tr> <tr> <td>files</td> <td>Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.</td> </tr> <tr> <td>items<span class="readOnly">Read Only</span></td> <td>Gives a DataTransferItemList object which is a list of all of the drag data.</td> </tr> <tr> <td>types<span class="readOnly">Read Only</span></td> <td>An array of strings giving the formats that were set in the dragstart event.</td> </tr> <tr> <td>setDragImage(element, x, y)</td> <td>Set the image to be used for dragging if a custom one is desired.</td> </tr> <tr> <td>clearData([format])</td> <td>Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.</td> </tr> <tr> <td>getData(format)</td> <td>Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.</td> </tr> <tr> <td>setData(format, data)</td> <td>Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.</td> </tr> </table> <h2>drag events</h2> <table> <tr> <th>Event</th> <th>On Event Handler</th> <th>Description</th> </tr> <tr> <td>drag</td> <td>ondrag</td> <td>Fired when an element or text selection is being dragged.</td> </tr> <tr> <td>dragend</td> <td>ondragend</td> <td>Fired when a drag operation is being ended (for example, by releasing a mouse button or hitting the escape key). (See Finishing a Drag.)</td> </tr> <tr> <td>dragenter</td> <td>ondragenter</td> <td>Fired when a dragged element or text selection enters a valid drop target. (See Specifying Drop Targets.)</td> </tr> <tr> <td>dragexit</td> <td>ondragexit</td> <td>Fired when an element is no longer the drag operation's immediate selection target.</td> </tr> <tr> <td>dragleave</td> <td>ondragleave</td> <td>Fired when a dragged element or text selection leaves a valid drop target.</td> </tr> <tr> <td>dragover</td> <td>ondragover</td> <td>Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).</td> </tr> <tr> <td>dragstart</td> <td>onddragstart</td> <td>Fired when the user starts dragging an element or text selection. (See Starting a Drag Operation.)</td> </tr> <tr> <td>drop</td> <td>ondrop</td> <td>Fired when an element or text selection is dropped on a valid drop target. (See Performing a Drop.)</td> </tr> </table> <h2>effectAllowed & dropEffect</h2> <ol> <li draggable="true" onDragStart="onDragStartEffect()">none</li> <li draggable="true" onDragStart="onDragStartEffect()">copy</li> <li draggable="true" onDragStart="onDragStartEffect()">copyLink</li> <li draggable="true" onDragStart="onDragStartEffect()">copyMove</li> <li draggable="true" onDragStart="onDragStartEffect()">link</li> <li draggable="true" onDragStart="onDragStartEffect()">linkMove</li> <li draggable="true" onDragStart="onDragStartEffect()">move</li> <li draggable="true" onDragStart="onDragStartEffect()">all</li> <li draggable="true" onDragStart="onDragStartEffect()">uninitialized</li> </ol> <fieldset> <legend>Drop Box</legend> <!-- 之所以要設置draggable=false,是因為drop來的元素都會被當成text/html,自動設置為拖動內容 --> <div class="dropBox" draggable="false" onDragOver="onDropOver()" onDrop="onDrop()"></div> </fieldset> <h2>transfer type</h2> <ol> <li draggable="true" onDragStart="onDragStartPlain()">拖拽文本(Dragging Text)</li> <li draggable="true" onDragStart="onDragStartLink()">拖拽鏈接(Dragging Links)</li> <li draggable="true" onDragStart="onDragStartHtml()">拖拽HTML與xml(Dragging HTML and XML)</li> <li>拖拽文件(Dragging Files)</li> <li>拖拽圖片(Dragging Images)<img id="img" width="50" height="30" src="https://www.baidu.com/img/bd_logo1.png"></li> <li>拖拽節點(Dragging Nodes)</li> <li draggable="true" onDragStart="onDragStartCustom()">拖拽自定義數據(Dragging Custom Data)</li> <li>拖拽文件到一個操作系統文件夾(Dragging files to an operating system folder)</li> </ol> <fieldset> <legend>Drop Box</legend> <div class="dropBox" draggable="false" onDragOver="onDropOver()" onDrop="onDrop()"></div> </fieldset> </body></html>
