正确利用H5新属性拖拽API（Drag 和 drop）

发现H5好多新属性没有用过，为了测试，在以前的优化过的项目上直接测试，效果还挺理想，于是做了一个简单的demo，方便学习交流，废话不多说，直接上代码：

简单设置一下，这是样式部分

#div1 {

width:128px;

height:66px;

padding:10px;

border:1px solid #aaa;

}

<p>请把下面的文字拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br />

<p id="drag1" draggable="true" ondragstart="drag(event)" />丁国庆 大帅比</p>

下面是JS部分

<script type="text/javascript">

  function allowDrop(event){

  event.preventDefault();

  }

  function drag(event){

  event.dataTransfer.setData("Text",event.target.id);

  }

  function drop(event){

  event.preventDefault();

  var data=event.dataTransfer.getData("Text");

  event.target.appendChild(document.getElementById(data));

  }

</script>

好了试试吧  具体效果如图

这是打开以后的页面

然后用鼠标去拖动“丁国庆  大帅比”放到矩形框里试试

完成以后

好了教程结束~谢谢大家的支持~