XHTML5 ----- 拖拽事件 （拖拽一段文字和图片案例）

1、拖拽一段文字

功能实现：

拖拽一段文字到一个区域，复制进去

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
<div id="div1" ></div>
<br />
<p id="drag1">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
这里p中的类容就是待拖拽的东西 div1为目标区域，首先要让这段文字拖拽，第一步要设置p 元素的draggable属性为"true"

然后绑定事件--开始拖拽事件
 οndragstart="drag(event)"
在这个事件中我们应该 处理什么事情呢？
我们设置要发出拖拽的数据，观察PPT上的信息

我们应该设置data在js中设置发送
ev.dataTransfer.setData("Text",ev.target.id);

这时候开始拖拽
这时候观察页面

然后我们应该在规定好的区域开始接受，接受之前给div绑定事件
οndrοp="drop(event)"

我们开始在js中写接受
 var data= e.dataTransfer.getData('Text')---接收数据
 ev.target.appendChild(do