发现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>
好了试试吧 具体效果如图
这是打开以后的页面
然后用鼠标去拖动“丁国庆 大帅比”放到矩形框里试试
完成以后
好了教程结束~谢谢大家的支持~
