HTML5新特性拖拽使用心得

本文主要介绍了拖拽和拖放的几个属性

先构建一个框架

<div id="wrap">
        <img id="drag" src="" draggable="true">
    <div id="drop" >
        <span>目标区域</span>
    </div>
</div>

draggable

为了使元素可拖动，将draggable属性设置为true

<img id="drag" 
     src="b5208ba59f1f064a2d39f991bc1e4dba.jpg" 
     alt="可拖动的图片"
     draggable="true"/>

ondragstart

作用于拖拽元素上，当拖拽元素被拖动的时候触发此事件

<img id="drag" 
     src="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" 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() { // 拖拽元素移动的时候触发
        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...）
欢迎小伙伴们指正