html5水平拖拽,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

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;

}

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