HTML5拖拽（一）

原生js也可以写拖拽，但是有两点限制：一是不能跨浏览器进行，二是代码繁杂冗余。html5就完美地避开了这两点限制，但是也不是没有缺点，兼容性就没有原生js那么好了。当然，如果不考虑ie，这简直是完美了。

drag兼容性

拖拽条件

实现拖拽需要完成以下两点

在拖拽元素上设置**属性：dragable

dragbale的值有三种：true（可拖拽）、false（不可拖拽）、none（随浏览器处理）

设置相关事件

拖拽对象：
1.dragstart：按下鼠标时触发
2.drag：按下鼠标持续时触发 (执行多次)
3.dragend：鼠标放开时触发
投放区：
1.dragenter:拖动目标且鼠标进入投放区时触发
2.dragover：拖动目标且鼠标移动在投放区时触发（执行多次）
3.dragleave：拖动对象且离开投放区时触发
4.drop：拖动对象且在投放区放开鼠标时触发，要先在dragover上设置禁止默认事件，才会有触发

一般完整的拖拽过程触发事件为：
dragstart->dragenter->dragover->drop->dragend

拖拽小栗子

例子描述：把一个小方块填充进另一个小方块

html

        <!--拖拽对象-->
        <div id="target" draggable="true"></div>
        <!--投放区-->
        <div id="section"></div>

css
为了使拖动效果更明显，所以在元素拖动过程中也设置了一些样式

        <style type="text/css">
            #target{
                width: 100px;
                height: 100px;
                background: #dac1df;
            }
            #section{
                height: 100px;
                width: 100%;
                border: 1px solid #562356; 
                margin-top: 35px;
            }
           //设置元素被拖动时样式
            .selected{
                border: 1px solid red;
            }
        </style>

            var target = document.getElementById('target');
            var section = document.getElementById('section');
            
            target.ondragstart = function(){
                target.className = 'selected';
            }

            section.ondragenter = function (event){
                var e = event||window.event
                e.preventDefault(); //阻止默认事件
                section.style.border = '2px solid #562356 ';//进入投放区显示一些标志性样式
            };
            section.ondragover = function (event){
                var e = event||window.event;
                e.preventDefault();
              //在投放区阻止默认事件，一是为了在window下的浏览器的鼠标移动样式不显示为禁止，二是为了drop事件能被触发
            };
            section.ondrop = function(event){
                var e = event||window.event;
                e.preventDefault();
                //拖拽处理
                section.appendChild(target);
            };
            //投放结束，一切样式恢复原状
            target.ondragend = function(){
                target.className = '';
                section.style.border = '1px solid #562356 ';
            }

这个小例子展示如何把HTML5拖拽用起来，但是有个问题是，我把别的元素，比如一个元素放进投放区，也会把小方块转移进投放区。这是为什么？
因为在drop事件里没有对拖拽元素进行，那我用target来判断行不？显然不行，因为投放区的鼠标事件都是针对投放区，无法识别拖拽元素，那要如何？
嘻嘻看下一篇：HTML5拖拽（二）--dataTransfer

HTML5拖拽（一）

拖拽条件

拖拽小栗子

推荐阅读更多精彩内容