HTML5拖放
2015-11-19 20:37
585 查看
所用例子在触屏设备无效
抓取一个对象后拖到另外一个位置
浏览器支持(ie9 ff opera12 chrome safari5)
safari5.1.2不支持拖放
设置draggable为true 让目标能被拖动
事件
1拖动元素时
a.dragstart-鼠标移入目标元素按下左键触发
b.drag-dargstart触发后移动鼠标连续触发该事件(类似mousemove事件)
c.gragend-拖动停止时触发 无论现在处于拖动的有效位置还是无效位置
2当元素被拖动到一个有效的防治目标上时,触发下列事件(该阶段的事件目标—即target或者srcElement都是这个目标元素)
a.dragenter-只要有元素被拖动到放置目标上,就触发dragenter事件(类似mouseover)
b.dragover-触发dragenter后在有效目标范围内移动式连续触发该事件
c.dragleave-被拖动元素从目标范围内被拖出目标范围外时触发
d.drop-被拖动元素被放置到了目标范围内(即在有效目标范围内松动鼠标左键)
attention dragleave and drop 只能支出二者其一
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
首先,为了使元素可拖动,把 draggable 属性设置为 true :
<img draggable="true" />
然后,规定当元素被拖动时,会发生什么。
在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
a 方法设置被拖数据的数据类型和值:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
数据类型为text
ondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault()
当放置被拖数据时,会发生 drop 事件。
在上面的例子中,ondrop 属性调用了一个函数,drop(event):
调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素(目标元素)中
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
<!--在目标范围内连续触发事件-->
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
<!--在鼠标移入目标元素按下左键后触发-->
function drop(ev)
{
ev.preventDefault();
//避免浏览器对数据的默认处理方式
var data=ev.dataTransfer.getData("Text");
//得到被拖的数据
ev.target.appendChild(document.getElementById(data));
//把目标数据插入到区域中(target)
}
<!--被拖动物品到达目标范围内被触发-->
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<!--ondrop被拖动物品到达目标范围内被触发-->
<img src="image/test.jpg" width="80" height="30" draggable="true" ondragstart="drag(event)" id="drag1" />
<!--ondragover在目标范围内连续触发事件-->
<!--ondragstart在鼠标移入目标元素按下左键后触发-->
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<!--放置被拖放物品的空间-->
</div>
</body>
</html>
<!--这里用到了dragstart,drop,dropover-->
可以相互拖动
抓取一个对象后拖到另外一个位置
浏览器支持(ie9 ff opera12 chrome safari5)
safari5.1.2不支持拖放
设置draggable为true 让目标能被拖动
事件
1拖动元素时
a.dragstart-鼠标移入目标元素按下左键触发
b.drag-dargstart触发后移动鼠标连续触发该事件(类似mousemove事件)
c.gragend-拖动停止时触发 无论现在处于拖动的有效位置还是无效位置
2当元素被拖动到一个有效的防治目标上时,触发下列事件(该阶段的事件目标—即target或者srcElement都是这个目标元素)
a.dragenter-只要有元素被拖动到放置目标上,就触发dragenter事件(类似mouseover)
b.dragover-触发dragenter后在有效目标范围内移动式连续触发该事件
c.dragleave-被拖动元素从目标范围内被拖出目标范围外时触发
d.drop-被拖动元素被放置到了目标范围内(即在有效目标范围内松动鼠标左键)
attention dragleave and drop 只能支出二者其一
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
设置元素为可拖放
首先,为了使元素可拖动,把 draggable 属性设置为 true :<img draggable="true" />
拖动什么 - ondragstart 和 setData()
然后,规定当元素被拖动时,会发生什么。在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
a 方法设置被拖数据的数据类型和值:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
数据类型为text
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时,会发生 drop 事件。在上面的例子中,ondrop 属性调用了一个函数,drop(event):
function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
代码解释:
调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素(目标元素)中
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
<!--在目标范围内连续触发事件-->
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
<!--在鼠标移入目标元素按下左键后触发-->
function drop(ev)
{
ev.preventDefault();
//避免浏览器对数据的默认处理方式
var data=ev.dataTransfer.getData("Text");
//得到被拖的数据
ev.target.appendChild(document.getElementById(data));
//把目标数据插入到区域中(target)
}
<!--被拖动物品到达目标范围内被触发-->
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<!--ondrop被拖动物品到达目标范围内被触发-->
<img src="image/test.jpg" width="80" height="30" draggable="true" ondragstart="drag(event)" id="drag1" />
<!--ondragover在目标范围内连续触发事件-->
<!--ondragstart在鼠标移入目标元素按下左键后触发-->
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<!--放置被拖放物品的空间-->
</div>
</body>
</html>
<!--这里用到了dragstart,drop,dropover-->
可以相互拖动
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #fruite{ width:1000px; height:200px; margin:20px auto; border:1px solid #000; } #blanket{ width:1000px; height:200px; margin:20px auto; border:1px solid #000; } </style> <script type="text/javascript"> function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id) } function allowdrag(ev){ ev.preventDefault(); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text",ev.target.id); ev.target.appendChild(document.getElementById(data)); } </script> <meta charset="utf-8"> <title>水果分类</title> </head> <body> <div id="fruite" ondrop="drop(event)" ondragover="allowdrag(event)"> <img id="img1" src="image/daquan.jpg" ondragstart="drag(event)" draggable="true" width="200" height="100"> <img id="img2" src="image/fupenzi.jpg" ondragstart="drag(event)" draggable="true" width="200" height="100"> <img id="img3" src="image/taohua.jpg" ondragstart="drag(event)" draggable="true" width="200" height="100"> </div> <div id="blanket" ondrop="drop(event)" ondragover="allowdrag(event)"> <!--这里放置被拖动的水果--> </div> </body> </html>
相关文章推荐
- HTML5应用程序缓存
- HTML5中表单的创建
- 用HTML5播放IPCamera视频
- HTML5<footer>元素
- 让所有浏览器支持HTML5 video视频标签
- HTML5中Web存储
- base64和图片的互转(HTML5的File实现)
- 探讨H5方向
- 使用HTML5语义标签时要注意的问题
- HTML5<figure>元素
- HTML5<aside>元素
- HTML5<article>元素
- HTML5<section>元素
- HTML5<nav>元素
- HTML5应用程序缓存
- HTML5<header>元素
- HTML5语义
- 解决IE不支持html5 file api中readAsBinaryString
- HTML5 localStorage and sessionStorage
- HTML5游戏制作之路_06_egret关于精灵表单spritesheet