首页 / HTML5 / Html5拖放的实现方法

Html5拖放的实现方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Html5拖放的实现方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3817字，纯文字阅读大概需要6分钟。

内容图文

今天写一下html5的拖放问题。

设置元素可以拖放

设置元素可以拖放用draggable属性，设置为true。元素就可以拖放了。（注：火狐浏览器不支持）

拖拽元素事件

ondragstart：拖拽前触发

ondrag：拖拽中连续触发

ondragend：拖拽结束触发

目标元素事件

ondragenter：移入目标元素时触发

ondragover：移入目标元素后连续触发

ondragleave：离开目标元素触发

ondrop：在目标元素释放鼠标触发

事件的执行顺序

1、drop不触发的时候

dragstart>drag>dragenter>dragover>dragleave>dragend

2、drop触发的时候（dragover的时候阻止默认事件）

dragstart>drag>dragenter>dragover>drop>dragend

解决火狐下的问题

必须设置 dataTransfer对象才可以拖拽图片外的其他标签

setData（）：设置数据key和value（必须是字符串）

getData（）：获取数据，根据key值，获取相应的value

offctAllowed：设置光标样式

setDragImage：设置拖拽样式，三个参数：指定的元素、坐标X、坐标y

拖拽元素事件具体代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div draggable="true"></div>
<script type="text/javascript">
//获取元素
var oDiv = document.querySelector('div');
//开始拖拽时元素变为绿色
oDiv.ondragstart = function(){
console.log('开始拖拽时触发')
oDiv.style.background = 'green';
}
//拖拽结束变为红色
oDiv.ondragend = function(){
console.log('拖拽结束触发');
oDiv.style.background = 'red'
}
oDiv.ondrag = function(){
console.log('拖拽时连续触发');
}
</script>
</body>
</html>

目标元素事件具体代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: red;
}
#div2{
width: 200px;
height: 200px;
border: solid 1px;
}
</style>
</head>
<body>
<div id="div1" draggable="true"></div>
<div id="div2"></div>
<script type="text/javascript">
//获取元素
var oDiv1 = document.querySelector("#div1");
var oDiv2 = document.querySelector("#div2");
//目标元素事件
oDiv2.ondragenter = function(){
console.log('移入目标元素触发')
oDiv2.style.borderColor = 'blue'
}
oDiv2.ondragleave = function(){
console.log('移除目标元素触发')
oDiv2.style.borderColor = 'black'
}
oDiv2.ondragover = function(ev){
console.log('移入到目标元素后连续触发');
var event = window.event || ev;
//阻止默认事件
event.preventDefault()
}
//要想触发ondrop事件，必须在ondragover事件中阻止默认事件
oDiv2.ondrop = function(){
console.log('在目标元素中释放拖放元素触发')
oDiv2.appendChild(oDiv1)
}
</script>
</body>
</html>

解决火狐浏览器的拖放问题具体代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li{
list-style: none;
width: 100px;
height: 40px;
margin-top: 10px;
background: orange;
}
div{
width: 200px;
height: 200px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<ul>
<li draggable="true">1</li>
<li draggable="true">2</li>
<li draggable="true">3</li>
</ul>
<div></div>
<script type="text/javascript">
var aLi = document.querySelectorAll("li");
//目标元素事件
var oDiv = document.querySelector("div");
//拖放元素事件
//解决火狐浏览器拖放问题:在开始拖放时设置setData()方法
for(var i=0;i<aLi.length;i++){
//添加属性，存储下标
aLi[i].index = i;
aLi[i].ondragstart = function(ev){
var event = window.event || ev;
event.dataTransfer.setData('test',this.index+1)
//设置光标样式
event.dataTransfer.effectAllowed = 'uninitialized';
//设置拖拽样式
event.dataTransfer.setDragImage(oDiv,100,100)
}
}
oDiv.ondragover = function(ev){
var event = window.event || ev;
event.preventDefault();
}
//释放元素时弹框
oDiv.ondrop = function(ev){
var event = window.event || ev;
var value = event.dataTransfer.getData('test','张三')
alert(value)
}
</script>
</body>
</html>

以上就是Html5拖放的实现方法的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的Html5拖放的实现方法全部内容，希望文章能够帮你解决Html5拖放的实现方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/387799.html

来源：【匿名】