拖放（drap && drop）在我们平时的工作中，经常遇到。它表示：抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。我从几个方面学习并实践这个功能。
拖放的流程对应的事件我们先看下拖放的流程：
选中 ---> 拖动 ---> 释放然后，我们一步步看下这个过程中，会发生的事情。
选中在HTML5标准中，为了使元素可拖动，把draggable属性设置为true。
文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。
图片和链接按住鼠标左键选中，就可以拖放。
文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放。
draggable属性：设置元素是否可拖动。
语法：<element draggable="true | false | auto" >
true: 可以拖动
false: 禁止拖动
auto: 跟随浏览器定义是否可以拖动
拖动每一个可拖动的元素，在拖动过程中，都会经历三个过程，拖动开始-->拖动过程中--> 拖动结束。
针对对象 事件名称 说明被拖动的元素 dragstart 在元素开始被拖动时候触发
drag 在元素被拖动时反复触发
dragend 在拖动操作完成时触发
目的地对象 dragenter 当被拖动元素进入目的地元素所占据的屏幕空间时触发
dragover 当被拖动元素在目的地元素内时触发
dragleave 当被拖动元素没有放下就离开目的地元素时触发
dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault();
释放到达目的地之后，释放元素事件
针对对象 事件名称 说明目的地对象 drop 当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。
选中拖动释放例子 <!DOCTYPE HTML> <html> <head> <title>拖放示例-文本</title> </head> <style> .src { display: flex; } .dropabled { flex: 1; } .txt { color: green; } .img { width: 100px; height: 100px; border: 1px solid gray; } .target { width: 200px; height: 200px; line-height: 200px; text-align: center; border: 1px solid gray; color: red; } </style> <body> <div> <div> <div> 所有的文字都可拖拽。 <p draggable="true">此段文字设置了属性draggable="true"</p> </div> <div> <a href="http://weiqinl.com" target="_blank">我是url:</a> </div> <img src="http://www.likecs.com/img1.png" alt="图片1" /> <img src="http://www.likecs.com/img2.png" alt="图片2" /> </div> <div>Drop Here</div> </div> <script> var dragSrc = document.getElementById('txt') var target = document.getElementById('target') dragSrc.ondragstart = handle_start dragSrc.ondrag = handle_drag dragSrc.ondragend = handle_end function handle_start(e) { console.log('dragstart-在元素开始被拖动时候触发') } function handle_drag() { console.log('drag-在元素被拖动时候反复触发') } function handle_end() { console.log('dragend-在拖动操作完成时触发') } target.ondragenter = handle_enter target.ondragover = handle_over target.ondragleave = handle_leave target.ondrop = handle_drop function handle_enter(e) { console.log('handle_enter-当元素进入目的地时触发') // 阻止浏览器默认行为 e.preventDefault() } function handle_over(e) { console.log('handle_over-当元素在目的地时触发') // 阻止浏览器默认行为 e.preventDefault() } function handle_leave(e) { console.log('handle_leave-当元素离开目的地时触发') // 阻止浏览器默认行为 // e.preventDefault() } function handle_drop(e) { console.log('handle_drop-当元素在目的地放下时触发') var t = Date.now() target.innerHTML = '' target.append(t + '-拖放触发的事件。') e.preventDefault() } </script> </body> </html>
drag-drop事件触发
在整个拖放过程中，我们以上说的是表面现象，事件过程内部还会发生什么事情呢？请看下面