HTML5新特性 拖拽使用心得
本文主要介紹了拖拽和拖放的幾個屬性
先構(gòu)建一個框架
<div id="wrap">
<img id="drag" src="" draggable="true">
<div id="drop" >
<span>目標區(qū)域</span>
</div>
</div>
draggable
為了使元素可拖動屯伞，將draggable屬性設(shè)置為true
<img id="drag"
src="b5208ba59f1f064a2d39f991bc1e4dba.jpg"
alt="可拖動的圖片"
draggable="true"/>
ondragstart
作用于拖拽元素上跛锌，當拖拽元素被拖動的時候觸發(fā)此事件
<img id="drag"
src="b5208ba59f1f064a2d39f991bc1e4dba.jpg"
alt="可拖動的圖片"
draggable="true"
ondragstart="start()"/>
ondragenter
據(jù)張鑫旭的文章《HTML5 drag & drop 拖拽與拖放簡介
》中描述
ondragenter事件：當拖曳元素進入目標元素的時候觸發(fā)的事件假褪，此事件作用在目標元素上
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/
目標元素設(shè)置
<div id="drop"
ondragenter="enter()">
目標區(qū)域
</div>
關(guān)于這個屬性，在幾個主流的瀏覽器Safari、Chrome、Firefox鳞贷、Opera下進行了測試。并不是當拖拽元素進入目標元素的時候觸發(fā)虐唠，而是拖拽過程中搀愧，作用于拖拽元素上的拖拽點進入目標元素的時候觸發(fā)。簡而言之，就是鼠標位置進入目標元素所在區(qū)域咱筛，ondragenter事件觸發(fā)搓幌，可觸發(fā)多次。
ondragleave
作用于目標元素上迅箩，拖拽元素上的光標點離開目標區(qū)域時觸發(fā)ondragleave屬性溉愁。
ondragover
作用于目標元素上，當拖拽元素在目標元素上移動的時候觸發(fā)饲趋。經(jīng)測試叉钥，光標在目標元素區(qū)域內(nèi)移動會觸發(fā)ondragover事件，當光標落在目標區(qū)域外篙贸，即使拖拽元素仍在目標區(qū)域內(nèi)，ondragover事件無法觸發(fā)
<div id="drop"
ondragenter="enter()"
ondragover="over()">
目標區(qū)域
</div>
ondrop
作用于目標元素上枫疆，當光標在目標區(qū)域內(nèi)爵川，松開鼠標時觸發(fā)ondrop事件。
<div id="drop"
ondragenter="enter()"
ondragover="over()"
ondrop="letGo()">
目標區(qū)域
</div>
注意事項：①需要在ondragover事件中執(zhí)行preventDefault()阻止默認事件息楔，否則無法觸發(fā)ondrop事件寝贡。②需要配合ondragover事件使用。
ondragend
作用于拖拽元素值依，拖拽完成時觸發(fā)
ondragexit
據(jù)點點樂淘淘的文章《H5 拖放事件詳解》描述
dragexit：當元素不再是拖動操作的直接選擇元素時觸發(fā)（很少使用）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" src="" 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() { // 拖拽元素移動的時候觸發(fā)
drag.style.opacity = 0;
}
function enter() { // 光標進入目標元素區(qū)域的時候觸發(fā)
drop.className = "change";
notice.innerHTML = "";
}
function leave() { // 光標離開目標元素區(qū)域的時候觸發(fā)
drop.style.backgroundColor = "";
drag.style.opacity = 1;
}
function over(ev) { // 光標在目標元素區(qū)域內(nèi)移動的時候觸發(fā)
ev.preventDefault();
if (drag.style.opacity == 0) {
drop.style.backgroundColor = "red";
}
}
function letGo() { // 光標在目標元素區(qū)域內(nèi)并松開鼠標的時候觸發(fā)
drag.style.opacity = 1;
drop.style.backgroundColor = "";
}
function end() { // 拖拽結(jié)束的時候觸發(fā)
drop.appendChild(drag);
drag.style.verticalAlign = "middle";
drag.draggable = false;
}
</script>
</html>
（有沒有大神教我怎么在代碼塊內(nèi)正確的寫img標簽，我寫的發(fā)布之后總會變樣了愿险，so sad...）
歡迎小伙伴們指正
