發(fā)現(xiàn)H5好多新屬性沒有用過，為了測試，在以前的優(yōu)化過的項目上直接測試，效果還挺理想，于是做了一個簡單的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>
好了試試吧? 具體效果如圖
這是打開以后的頁面
然后用鼠標去拖動“丁國慶? 大帥比”放到矩形框里試試
完成以后
好了教程結束~謝謝大家的支持~
