技术手札
随手笔记
Toggle navigation
技术手札
Home
MacOS
Database
Linux
PHP
Git
Golang
About Me
Archives
Tags
页面拖拽操作
2023-08-01 22:49:43
42
0
0
admin
### 一、元素支持拖拽 对于被拖拽的元素,HTML5增加了三个事件用于监听拖拽的过程 * dragstart 拖拽开始 * drag 正在拖拽 * dragend 拖拽结束 元素想要被拖拽,必须设置draggable属性： ```html <div class="drag-me" draggable="true"></div> ``` 页面默认的动作是拖拽后回到原位 在拖动阶段，我们可以存储被拖动元素的属性或者状态到事件对象的`dataTransfer`中，如果出现跳转，则是浏览器默认的事件被触发，我们需要使用`e.preventDefault()`来阻止默认事件。 ### 二、投放区的事件 对于被拖的元素而言，拖向何处则为投放区，投放区的事件如下： * dragenter 被拖放元素进入 * dragover 被拖放元素移动 * dragleave 被拖放元素离开 ### 三、拖拽文件上传 经过观察，事件对象中的`dataTransfer`也存在`files`属性，我们可以用熟悉的方法上传拖拽进来的文件： ```html <body> <div id="drop-zone"></div> </body> <script type="text/javascript"> var dz = document.getElementById('drop-zone'); dz.ondragover = function(e) { e.preventDefault(); } dz.ondrop = function(e) { e.preventDefault() console.log(e.dataTransfer.files[0]); } </script> ``` 然后做Ajax文件上传即可: ```js dz.ondrop = function(e) { e.preventDefault() var file = e.dataTransfer.files[0]; var formData = new FormData(); formData.append("aa", file); var xml = new XMLHttpRequest(); xml.open("post", url, false); xml.send(formData); } ```
Prev: No Post
Next:
Linux 服务管理
0
likes
42
Weibo
Wechat
Tencent Weibo
QQ Zone
RenRen
Table of content
admin
admin