HTML5之拖放

过去我们在web中想实现拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，还要不停地获取鼠标的坐标，还要不停的修改元素的位置，代码要堆很多，而且性能上也很不是很好，现在有了html5原生的Drag & Drop，小伙伴们再一次惊呆了，接着来看下html5拖放的具体使用方法，猛击 这里查看DEMO

事件描述：

dragstart：开始移动被拖拽元素时触发（主体是被拖拽元素）。

dragenter：被拖拽元素进入目标元素时触发（主体是目标元素）。

dragover：被拖拽元素在目标元素内移动时触发（主体是目标元素）。

dragleave：被拖拽元素离开目标元素时触发（主体是目标元素）。

drag：移动被拖拽元素时触发（主体是被拖拽元素）。

drop：目标元素完全接受被拖拽元素时触发（主体是目标元素）。

dragend：整个拖放操作结束时触发（主体是被拖拽元素）。

事件中的对象：

拖拽事件中，HTML5定义了dataTransfer对象，它包含了一些方法及属性。包括了setData()、getData()、clearData()方法来操作拖拽过程中传递的数据，setDragImage(）方法来设置拖拽时鼠标的下面的图片（默认为被拖拽元素），effectAllowed 和 dropEffect 属性来设置拖放效果。

说明：

setData(format, data) 设置拖拽事件中传递的数据，format参数为数据类型

getData(format) 获拖拽事件中传递的数据，format参数为数据类型

clearData() 清除拖拽事件中传递的数据

setDragImage(element, x, y) 其中element表示拖拽时鼠标下面的图片，x 表示图标距离鼠标指针的x轴方向的偏移值，y表示图标距离鼠标指针y轴方向的偏移值。

effectAllowed属性设置被拖放元素拖放效果，dropEffect属性设置目标元素拖放效果。

注释： 以上属性的具体参数可以去w3.org去查看，这里就不一一列举。

注意：在整个拖拽过程中，一定要在dragover中执行preventDefault()，否则拖拽事件不会被触发，另外在拖拽的时候只会触发拖拽的相关事件，鼠标事件，例如mousemove，是不会触发的。

兼容性：（来自http://caniuse.com）

从上面的数据来看，除了手机端，和ie 8 9外，支持情况还是蛮好的， 但是几经周折测试后，发现该属性，碎片化严重，firefox下拖拽会新打开一个标签页来显示被拖拽元素的url，而safari有些版本直接就不支持，另外ie10中测试setDragImage直接是undefined，这是一些发现的问题，未发现的坑还不晓得有多少。

效果示例：

html代码：

<div class="box" id="left_box">
  <div draggable="true" class="drag" id="drag1">A</div>
  <div draggable="true" class="drag" id="drag2">B</div>
  <div draggable="true" class="drag" id="drag3">C</div>
</div>
<div class="box" id="right_box"></div>

 css代码：

* {
  margin: 0;
  padding: 0;
}
body {
  width: 500px;
  margin:20px auto;
}
.box {
  width: 180px;
  min-height: 320px;
  padding: 0 10px 10px;
  border: 2px dashed #ccc;
  text-align: center;
}
#left_box {
  float: left;
}
#right_box {
  float: right;
}
.drag {
  width: 180px;
  height: 100px;
  margin-top: 10px;
  line-height: 100px;
  color: #fff;
  background: #428BCA;
  text-align: center;
  cursor: move;
}

javascript代码：

$(function(){
  var dragElement = $('.drag') // 被拖拽元素
  , targetElement = $('.box'); // 目标元素

  dragElement.on('dragstart', function(e){
    e.originalEvent.dataTransfer.setData("Text", e.target.id); // 设置拖拽事件中的传递数据
  })

  targetElement.on('dragover', function(e){
    e.preventDefault(); // 阻止默认行为
  }).on('dragenter', function(e){
    e.target.style.borderColor = 'red';  // 进入目标元素，目标元素样式改变
  }).on('dragleave', function(e){
    e.target.style.borderColor = '#ccc';  // 离开目标元素，目标元素样式改变
  }).on('drop', function(e){
    // 把拖拽事件中的传递数据取出并插入到目标元素中
    var data = e.originalEvent.dataTransfer.getData("Text");
    $(this).append(document.getElementById(data));
    // 目标元素样式改变
    this.style.borderColor = '#ccc';
  })
  
});

结束语：该属性固然很吸引人，但就目前阶段，碎片化严重，所以该属性目前来说，还是处于试玩阶段(神器chrome支持较好)。。。