H5 拖放

创建拖放对象

draggable 通过draggable告诉浏览器哪些元素需要实现拖拽功能。
有三个可选值：

1. true：元素可以被拖拽。
2. false：元素不能被拖拽。
3. auto：浏览器自己判断元素是否能被拖拽(默认)

处理拖放事件

1. 对象拖放事件
   dragstart:按下鼠标键并开始移动时触发。
   drag：在元素拖拽过程中持续触发————>相似与mousemove。
   dragend：元素拖拽停止时触发。

2. 对象拖放事件流程
   ondragstart：设置被拖图片边框色。

    img.ondragstart = function(event){
        event.target.className = 'red';
    }
   

ondrag：显示被拖图片的alt。

    img.ondrage = function(event){
        div.innerHTML = event.target.alt;
    }

ondragend：边框色恢复原始状态。

    img.ondragend = function(event){
        event.target.className = '';
    }

3. 投放区事件流程
   元素被拖动到有效的放置目标时，下列事件会依次发生：
   1. dragenter：当拖拽对象进入投放区时触发。
   2. dragover：拖拽对象在投放区内移动时持续触发。
   3. dragleave：元素被拖出了投放区时触发。
   4. drop：拖拽对象投放在投放区时触发。

虽然所有元素都支持放置目标事件，但这些元素默认是不允许放置的，需要重写事件的默认行为。

box.ondragenter = function(event){
    event.preventDefault();
}
box.ondragover = function(event){
    event.preventDefault();
}

在ondragover中一定要执行preventDefault()否则ondrop事件不会被触发。

dataTransfer对象方法

• dataTransfer对象(event对象属性)
  该对象专门用于携带拖放过程中的数据。

• dataTransfer对象--常用方法
  setData(数据格式，数据)
  将拖放元素的数据存入dataTranfer对象中
  getData(数据格式)
  读取存入dataTransfer对象中的数据

  数据格式常用值为"Text"或"URL"

    tgt.ondragstart = function(event){
        msg.innerHTML = event.target.alt;
        img = event.target;//存储拖拽图片
        event.dataTransfer.setData('text','hello world');
        event.dataTransfer.setDragImage(icon,400,300);
        event.dataTransfer.effectAllowed="all";
    }
    box.ondragenter = function(event){
        box.style.borderColor = "red";
    }
    box.ondragover = function(event){
        event.preventDefault();//阻止浏览器默认行为
        event.dataTransfer.dropEffect = "move";
    }
    box.ondrop = function(event){
        event.preventDefault();//阻止浏览器默认行为
        box.appendChild(img);
        var txt = event.dataTransfer.getData('text');
        alert(txt);
    }
  

• dropEffect
  表示被拖动的元素能够执行哪种放置行为。
  可能的值：
  none：不能把拖动的元素放在这里。
  move：把拖动的元素移动到放置目标。
  copy：把拖动的元素复制到放置目标。
  link：放置目标会打开拖动的元素(有URL)

• effectAllowed
  允许拖动元素的哪种dropEffect
  允许值：
  copyLink：允许值为copy和link的dropEffect
  copyMove：允许值为copy和move的dropEffect
  linkMove：允许值为link和move的dropEffect
  all：允许任意的dropEffect

• 注意

  • dropEffect属性搭配effectAllowed属性使用
  • 在drgstart事件处理程序中设置effectAllowed属性
  • 在dragover事件处理程序中设置dropEffect属性
  • dropEffect的每个可能值都会导致光标显示为不同的符号
  • 需要说明的是，除非effectAllowed属性值为all，dropEffect与effectAllowed属性值必须保持一致，否则，将不能显示设置的拖放效果

• files文件

  • dataTransfer.files：如果是拖放文件，则返回正在拖放的文件列表FileList。
  • FileReader：专门用于读取文件，FileReader接口提供一些读取文件的方法与一个包含读取结果的事件模型。
  • FileReader.readAsDataURL方法：参数为要读取的文件对象，将文件读取为DataUrl
  • FileReader.onload事件：当读取文件成功完成的时候出发此事件，在事件触发后，你可以通过this.result来获取读取的文件数据，如果是图片，将返回base64格式的图片数据。

分享

常用分享工具

1. jiathis：http://www.jiathis.com/
2. bshare：http://www.bshare.cn/
3. 百度：http://share.baidu.com/