（一）HTML5之拖放（drag and drop）

HTML5新增了哪些新特性：

（1）语义化标签 header footer nav article aside等；

（2）拖放（drag and drop）API；

（3）视频、音频（video  audio）API；

（4）地理定位（Geolocation）API；

（5）应用缓存；

（6）存储（localStorage sessionStorage）；

（7）画布canvas；

（8）webwokers websocket；

拖放

IE4的时候，只支持图片和文本的拖放，到了IE5.5拖放功能得到扩展，页面中所有元素都可以进行拖放,而且支持在框架建，窗口间，应用间进行拖放。

可拖动

默认情况下图片、链接、文本是可拖动的，不用编写代码就可以拖动，但是其他元素默认是不可拖动的，HTML5规定了一个属性draggable，为true即可拖动，为false即不可拖动；

被拖动元素触发的事件：

dragstart

drag

dragend

目标元素触发的事件：

dragenter

dragover

drag

dragleave

drop

事件触发的先后顺序:

当按下鼠标并开始拖动目标元素的时候就会触发dragstart事件，此时鼠标的光标会变成‘不可放置’的符号（圆圈中有一条反斜线），说明当前位置不能放置；

紧接着会触发drag事件，只要在拖动，drag事件就会一直触发；

如果此时还没有拖出目标元素所在范围并且停止拖拽就会触发dragend；

当离开被拖动元素所在范围进入一个有效放置的目标元素时触发dragenter事件；

随后会触发dragover事件；

如果离开了目标元素会触发dragleave事件；

如果没有离开目标元素并且松开鼠标就会触发drop事件；

自定义放置目标

当一个目标元素不可放置的时候，无论用户怎么操作都不会发生drop事件，我们可以通过代码将他变为有效放置

<div id="box1">
    <img id="img1" src="./昆明.jpg" alt="">
</div>
<div id="box2"></div>

<style>
    div{
      width: 200px;
      height: 133px;
      border: 1px solid blueviolet;
      float: left;
    }
    #box2{
      margin-left: 50px;
      border: 1px solid pink;
    }
    img{
      width: 100%;
    }
</style>

 <script>
    let box2 = document.getElementById('box2');
    box2.addEventListener('dragover', function(event){
      event.preventDefault();
    })
    box2.addEventListener('dragenter', function (event) {
        event.preventDefault();
      })
  </script>

此时一个无效放置的div，就变成了可放置的目标元素。

dataTransfer对象

只是简单的拖放没有数据变化是没有什么用的，通过dataTransfer可以实现数据的交换；

dataTransfer有两个主要方法

setData()：setData()用来设置要交换的数据，setData('text/plain', ' some Text') 有两个参数,第一个是类型（text/plain 、text/uri-list）,第二个要交换的内容；我们可以在dragstart事件中来设置setData()；

getData()：getData()用来取setData()保存的值；setData的第一个参数是getData()的唯一的参数；取数据时只能在drop事件中取；

两个DIV之间拖动图片

<div class="box1" ondragover="dragover(event)"  ondrop="drop(event)">
    <img id="drag1" src="./田田.png" draggable="true" ondragstart="dragStart(event)" ondrag="drag(event)" ondragend="dragEnd(event)" />
</div>
<div class="box2" ondragover="dragover(event)" ondragenter="dragEnter(event)" ondrop="drop(event)" ondragleave="dragleave(event)">
</div>

<style>
    div{
      width: 150px;
      height: 200px;
      border: 1px solid red;
      text-align: center;
      float: left;
    }
    .box2{
      border: 1px solid green;
      margin-left: 20px;
    }
    img{
      width: 150px;
      height: 200px;
    }
</style>

<script>
// 被拖动元素
   function dragStart(e){
     e.dataTransfer.setData('text-plain', e.target.id);
     console.log('dragStart');
   }

  function drag(e) {
    console.log('drag');
  }
  
  function dragEnd(e) {
    console.log('dragEnd');   
  }

// 目标元素
  function dragEnter(e) {
    e.preventDefault();
    console.log('dragEnter'); 
  }

  function drop(e) {
    console.log('drop');
    // 获取拖动元素的Id名
    var data = e.dataTransfer.getData('text-plain')
    e.target.appendChild(document.getElementById(data));
  }

  function dragover(e) {
    e.preventDefault();
    console.log('dragover');
  }
  function dragleave(e) {
    console.log('dragleave');
  }
</script>

dropEffect与effectAllowed

dataTransfer对象还能确定被拖动元素以及目标元素能够接收什么操作，需要访问两个属性dropEffect、effectAllowed；

（1）dropEffect可以知道被拖拽元素能够执行哪种放置行为；

         'none'：不可以把拖动的元素放到这里；

         'move'：移动到放置目标；

         'copy'：复制到放置目标；

         'link'：放置目标会打开拖动元素（拖动元素必须是一个链接）；

   要使用dropEffect，必须在ondragenter事件处理程序中针对放置目标来设置；并且dropEffect只有搭配effectAllowed才有用；

（2）effectAllowed表示允许拖动元素的哪种dropEffect；

         'uninitialized': 没有给被拖动元素设置任何放置行为；

         'none': 被拖动元素不能有任何行为；

         'copy': 只允许值为copy的dropEffect；

         'move': 只允许值为move的dropEffect；

         'link': 只允许值为link的dropEffect；

         'copylink': 允许值为copy和link的dropEffect；

         'copymove': 允许值为copy和move的dropEffect；

         'linkmove': 允许值为link和move的dropEffect；

  必须在ondragstart事件处理程序中设置effectAllowed属性。