拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

设置元素为可拖放

<img draggable="true">    //就是加一个属性为true

拖动什么 - ondragstart 和 setData()

首先给imag加个ondragstart 属性，触发一个事件drag

function drag(ev){				//dataTransfer.setData() 方法设置被拖数据的数据类型和值：
    ev.dataTransfer.setData("Text",ev.target.id)   // Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。   
}

然后再img中调用

<img src="xxx" draggable="true" ondragstart="drag(event)"/>

放到何处 - ondragover

图片可以拖动了，那么需要可以让它放置的容器了

我们设计一个div让它放置,并给它加上ondragover,添加允许放置

<style>
    #one{
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
  <div id="one" ondragover="allowdrag(event)"></div>
<script>
    function allowdrag(ev){
    ev.preventDefault();      //这要通过调用 ondragover 事件的 event.preventDefault() 方法：
    
}

</script>

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。给div添加一个ondrop，触发一个事件

<div id="one"  ondrop="drop(event)" ondragover="allowdrag(event)"></div>   //给ondrop属性添加一个事件

<script>
function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");    //first get this type of "Text",it can get any of zhe data,yes the data is "one"
    ev.target.appendChild(document.getElementById(data));   //here we add a element of id="one",so the imag is now in div
       
}
</script>

summary

step

1. set up the element can be drag => draggable="true"
2. set up the action of dragging ,as usual we deliver the element 's id,here just like id ="one "
3. now we have the dragging element ,next we should set up the place where let the element in ,the attribute of ondragover
4. at last set up the action of the receiver ,ondrop