HTML5新特性 拖拽使用心得
本文主要介绍了拖拽和拖放的几个属性
先构建一个框架
<div id="wrap"> <img id="drag" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="" draggable="true"> <div id="drop" > <span>目标区域</span> </div></div>
draggable
为了使元素可拖动，将draggable属性设置为true
<img id="drag" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="b5208ba59f1f064a2d39f991bc1e4dba.jpg" alt="可拖动的图片" draggable="true"/>
ondragstart
作用于拖拽元素上，当拖拽元素被拖动的时候触发此事件
<img id="drag" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="b5208ba59f1f064a2d39f991bc1e4dba.jpg" alt="可拖动的图片" draggable="true" ondragstart="start()"/>
ondragenter
据张鑫旭的文章《HTML5 drag & drop 拖拽与拖放简介
》中描述
ondragenter事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B%BD%E4%B8%8E%E6%8B%96%E6%94%BE%E7%AE%80%E4%BB%8B/
目标元素设置
<div id="drop" ondragenter="enter()"> 目标区域</div>
关于这个属性，在几个主流的浏览器Safari、Chrome、Firefox、Opera下进行了测试。并不是当拖拽元素进入目标元素的时候触发，而是拖拽过程中，作用于拖拽元素上的拖拽点进入目标元素的时候触发。简而言之，就是鼠标位置进入目标元素所在区域，ondragenter事件触发，可触发多次。
ondragleave
作用于目标元素上，拖拽元素上的光标点离开目标区域时触发ondragleave属性。
ondragover
作用于目标元素上，当拖拽元素在目标元素上移动的时候触发。经测试，光标在目标元素区域内移动会触发ondragover事件，当光标落在目标区域外，即使拖拽元素仍在目标区域内，ondragover事件无法触发
<div id="drop" ondragenter="enter()" ondragover="over()"> 目标区域</div>
ondrop
作用于目标元素上，当光标在目标区域内，松开鼠标时触发ondrop事件。
<div id="drop" ondragenter="enter()" ondragover="over()" ondrop="letGo()"> 目标区域</div>
注意事项：①需要在ondragover事件中执行preventDefault()阻止默认事件，否则无法触发ondrop事件。②需要配合ondragover事件使用。
ondragend
作用于拖拽元素，拖拽完成时触发
ondragexit
据点点乐淘淘的文章《H5 拖放事件详解》描述
dragexit：当元素不再是拖动操作的直接选择元素时触发（很少使用）http://www.cnblogs.com/diantao/p/6282068.html
（既然不常用就先不研究它啦，需要的时候再补充）
贴一个小demo
<!DOCTYPE html><html lang="zh"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{ transition: 2s;
} #wrap{ width: 400px; padding: 20px 0; margin: 0 auto; background-color: #e8e5e5; text-align: center;
} #drop{ position: relative; width: 300px; height: 300px; line-height: 300px; margin: 0 auto; border: 1px solid; text-align: center; font-size: 30px; border-radius: 20%;
} #drag{ border-radius: 20%;
} #imgWrap{ width: 250px; height: 221px; margin: 0 auto; margin-bottom: 10px;
} #notice{ position: absolute; width: 100%
} .change{ animation: change .1s 10; /*animation-iteration-count: 10;*/
}
@keyframes change{
0%{ background-color: #fff;
}
100%{ background-color: red;
}
} </style></head><body>
<div id="wrap">
<div id="imgWrap">
<img id="drag" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="" draggable="true" ondragstart="start()" ondragend="end()">
</div>
<div id="drop" ondragenter="enter()" ondragleave="leave()" ondragover="over(event)" ondrop="letGo()">
<div id="notice">将图片拖入此处</div>
</div>
</div> </body><script type="text/javascript">
function start() { // 拖拽元素移动的时候触发
drag.style.opacity = 0;
} function enter() { // 光标进入目标元素区域的时候触发
drop.className = "change";
notice.innerHTML = "";
} function leave() { // 光标离开目标元素区域的时候触发
drop.style.backgroundColor = "";
drag.style.opacity = 1;
} function over(ev) { // 光标在目标元素区域内移动的时候触发
ev.preventDefault(); if (drag.style.opacity == 0) {
drop.style.backgroundColor = "red";
}
} function letGo() { // 光标在目标元素区域内并松开鼠标的时候触发
drag.style.opacity = 1;
drop.style.backgroundColor = "";
} function end() { // 拖拽结束的时候触发
drop.appendChild(drag);
drag.style.verticalAlign = "middle";
drag.draggable = false;
}</script></html>（有没有大神教我怎么在代码块内正确的写img标签，我写的发布之后总会变样了，so sad...）
欢迎小伙伴们指正
作者：三井豆
链接：https://www.jianshu.com/p/1710b695ce44
共同学习，写下你的评论
评论加载中...
作者其他优质文章
