关于HTML5的拖拽

不介绍具体情况，先看API，注意看后面括号的说明

  • dragstart：拖拽开始（应用于被拖拽对象）
  • drag：拖拽中（应用于被拖拽对象）
  • dragenter：拖拽到指定位置（应用于拖拽目标）
  • dragleave：拖拽离开指定位置（应用于拖拽目标）
  • dragover：拖拽在指定位置（应用于拖拽目标）
  • drop：在指定位置释放（应用于拖拽目标）
  • dragend：拖拽结束（应用于被拖拽对象）

 

事件

描述

目标

dragstart

开始拖对象时触发

被拖动对象

dragenter

当对象第一次被拖动到目标对象上时触发，同时表示该目标对象允许‘放’这动作

目标对象

dragover

当对象拖动到目标对象时触发

当前目标对象

dragleave

在拖动过程中，当被拖动对象离开目标对象时触发

先前目标对象

drag

每次当对象被拖动时就会触发

被拖动对象

drop

当发生“放”这动作时触发

当前目标对象

dragend

在拖放过程，松开鼠标时触发

被拖动对象

使用方法

在需要被拖拽的对象上设置属性draggable="true"，但设置此属性后，对象将不能被选中。

使用范围

不是所有的object都支持的，通常支持块，比如div p span，但不支持select option等,但可以把他们放到div里面。

例子见代码

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head runat="server">
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <script type="text/javascript">
 9         window.onload = function () {
10             var obj = document.getElementById("obj");
11             var left = document.getElementById("left");
12             var right = document.getElementById("right");
13             //设置拖拽的对象的光标
14             obj.style.cursor = "move";
15             obj.ondragstart = function (e) {//事件顺序：1
16                 //设置内容，非必要,前为格式，后为值,取值为text|URL对应是text/plain|text/url-list,实际可为MIME，不同类型可同时保存
17                 e.dataTransfer.setData("text", obj.id);
18                 /*被拖动的元素能执行的行为，包括
19                 none：不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
20                 move：应该把拖动的元素移动到放置目标。
21                 copy：应该把拖动的元素复制到放置目标。
22                 link：放置目标会打开拖动的元素(但拖动的元素必须是个链接，有URL地址)。
23                 把元素拖动到放置目标上的时候，以上每一个值都会导致光标显示为不同的符号。
24                 */
25                 e.dataTransfer.dropEffect = "move";
26                 /*仅设置dropEffect是无效的，需要结合effectAllowed，此属性表示允许拖动元素的那种行为，即移动此物体到能带有ondrop事件的物体上空时鼠标下方显示的样式，
27                 取值如下
28                 uninitialized：没有给被拖动元素设置任何放置行为。
29 　　            none：被拖动的元素不能有任何行为
30 　　            copy：只允许值为”copy”的dropEffect。
31 　　            link：只允许值为”link”的dropEffect。
32 　　            move：只允许值为”move”的dropEffect。
33 　　            copyLink：允许值为”copy”和”link”的dropEffect。
34 　　            copyMove：允许值为”copy”和”move”的dropEffect。
35 　　            linkMove：允许值为”link”和”move”的dropEffect。
36 　　            all：允许任意dropEffect。
37 　　            要设置effectAllowed属性必须在ondragstart事件处理程序中设置。
38                 */
39                 e.dataTransfer.effectAllowed = "move";
40                 //e.dataTransfer.setDataImage(Element image,long x,long y);//设置拖拽显示的替代图像。存在兼容问题
41                 //e.dataTransfer.addElement(Element element);//设置在拖放的同时更随拖放的对象。存在兼容问题
42                 return true;
43             };
44             obj.ondrag = function (e) {//事件顺序：2
45                 //只要拖着没放，就一直执行，无论在那个对象上方
46             };
47             obj.ondragend = function (e) {//事件顺序：6
48                 //拖放完成了，清理工作
49                 e.dataTransfer.clearData("text");//不清理应该也没问题，会自动清理
50             };
51             left.ondragenter=right.ondragenter = function (e) {//事件顺序：3
52                 this.style.backgroundColor = "rgb(230,230,230)";
53             };
54             left.ondragover = right.ondragover = function (e) {//事件顺序：4
55                 e.preventDefault();//必须设置，否则无法执行ondrop
56                 //这里设置当拖动的物体在目标物体上方移动时的代码
57             };
58             left.ondragleave = right.ondragleave = function (e) {//事件顺序：5(并列)
59                 this.style.backgroundColor = "";
60             }
61             left.ondrop = right.ondrop = function (e) {//事件顺序：5(并列)
62                 //e.dataTransfer.files如果是文件拖拽，可以读取
63                 this.style.backgroundColor = "";
64                 var id = e.dataTransfer.getData("text");
65                 var element = document.getElementById(id);
66                 if (element.parentElement&&element.parentElement!=this)
67                     element.parentElement.removeChild(element);
68                 this.appendChild(element);//同一对象重复添加不会错
69             };
70         };
71     </script>
72     <div id="left" style="width:150px;height:200px;border:1px solid black;float:left;">
73         <span id="obj" draggable="true" style="border:2px dotted gray;">测试文字</span>
74     </div>
75     <div id="right"style="width:150px;height:200px;border:1px solid black;float:left;">
76 
77     </div>
78 </body>
79 </html>

 

posted @ 2015-09-26 02:50  YumiaoChow  阅读(345)  评论(0)  编辑  收藏  举报