HTML5拖拽（一）

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

drag兼容性

拖拽条件

---

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

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

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

2. 设置相关事件

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

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

拖拽小栗子

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

---

• html

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

• js

            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