HTML5 drag drop
来源：互联网 发布：成都闪电seo 编辑：程序博客网 时间：2024/06/10 02:38
<!DOCTYPE HTML><html> <meta charset="utf8"> <head> <style> body { font-size: 14px; } .dropBox { min-height: 50px; } ul, ol { margin: 0; } caption { font-size: 18px; font-weight: bold; text-align: left; } 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 href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer</a></p> <p>MDN event part: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API</a></p> <p>MDN effectAllowed part: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed</a></p> <p>MDN drag type part: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types</a></p> <table> <caption>dataTransfer properties</caption> <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> <table> <caption>drag events</caption> <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>
0 0
- html5 Drag and drop
- HTML5----拖放drag,drop
- HTML5 Drag and Drop
- html5 Drag and Drop
- HTML5 drag drop
- html5 File Drag-and-Drop
- HTML5 拖放(Drag和drop)
- HTML5 拖放(Drag和drop)
- html5 原生 drag drop helloworld
- html5拖(drag)放(drop)功能
- HTML5拖放（drag和drop）
- HTML5 拖放（Drag 和 Drop）
- Html5 拖放（drag 和 drop）
- 初学HTML5 拖放（Drag 和 Drop）
- HTML5 拖放（Drag 和 Drop）
- HTML5 拖放（Drag 和 Drop）
- html5新特性，拖放，drag drop
- HTML5 drag和drop的实践
- Mac下使用brew安装mongodb
- leetcode 404 Sum of Left Leaves
- OIV用户手册
- 利用JDK8的新特性计算某个目录下的文件中包含字符串的次数
- Runtime.availableProcessors()
- HTML5 drag drop
- 阿里云安装redis
- Ngxin安装、反向代理、负载均衡学习笔记
- JVM 基础概念
- 数字的人民币中文读法
- 通过拉勾网分析数据分析职位现状
- codeforces 763B. Timofey and rectangles [思维]【智商】
- Mysql使用navicat 结果集部分未显示
- 运行我的第一个python程序
