现在打开优酷的网站我们再观看视频时如果拖动滚动条，页面会自动出现一个小的播放窗口，而这个播放窗口是可以说随便拖拽的。这种对图片或者链接的拖拽效果是怎么实现的？其实用HTML5就很容易实现了，因为HTML5中有个
html5中默认对图片、链接可以拖放，其它元素需要设置draggable="true"才能拖放，事不宜迟，老夫马上去试试。
1 <!DOCTYPE html>
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title></title>
6
7 </head>
8 <body>
9 <div id="dragme" draggable="true" style=" width: 200px; border: 1px solid gray;">请拖放</div>
10 <div id="text" style=" width: 200px; height: 200px; border: 1px solid gray;"></div>
11 <script type="text/javascript">
12 document.ondragover = function (e) {
13 e.preventDefault();
14 };
15 document.ondrop = function (e) {
16 e.preventDefault();
17 };
18
19 var source = document.getElementById('dragme');
20 var dest = document.getElementById('text');
21 source.addEventListener('dragstart', function (e) {
22 var dt = e.dataTransfer;
23 dt.setData('text/plain', '您好' new Date());
24 }, false);
25
26 dest.addEventListener('dragend', function (e) {
27 e.preventDefault();
28 }, false);
29
30 dest.addEventListener('drop', function (e) {
31 var dt = e.dataTransfer;
32 var text = dt.getData('text/plain');
33 dest.innerHTML = text;
34 e.stopPropagation();
35 e.preventDefault();
36 return false;
37 }, false);
38
39 </script>
40 </body>
41 </html>拖放时候一定要记住，阻止页面默认行为，否则会打开新窗口的，其中以下亦是重点：
1 拖放可使用DataTransfer传递数据，该对象是非常有用的，因为在拖动目标元素时，可能会经过其它元素，我们可以用此传递信息；
API：
dragstart 被拖放元素 开始拖放时
drag 被拖放元素 拖放过程中
dragenter 拖放过程中鼠标经过的元素 被拖放元素开始进入本元素时
dragover 拖放过程中鼠标经过的元素 本元素内移动
drageleave 拖放过程中鼠标经过的元素 离开本元素
drop 拖放的目标元素 拖动的元素放到了本元素中
dragend 拖放的对象 拖放结束
