HTML5如何实现元素拖拽_html5教程技巧

作者：匿名字体：[增加减小] 来源：互联网时间：2018-12-03

本文主要包含HTML5,元素拖拽,拖拽等相关知识,匿名希望在学习及工作中可以帮助到您

很多前端恐怕都不了解HTML5的拖拽怎么实现吧，本文了解了下思路。进行整理备份，便于以后查阅。

先上示例：

index.html

>
<html>
<head>
<meta charset="UTF-8">
<title>Dragtitle>
<style>
.box{
width: 400px;
height: 400px;
float: left;
}
#box1{
background: #CCC;
}
#box2{
background: #FF0;
}
style>
head>
<body>
<div id="box1" class="box">div>
<div id="box2" class="box">div>
<img src="http://pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />

app1.js
/**
* app1.js
*/
var oBox1,
oBox2,
oImg1;
window.onload = function(){
oBox1 = document.getElementById('box1');
oBox2 = document.getElementById('box2');
oImg1 = document.getElementById('img1');
//
oBox1.ondragover = oBox2.ondragover = function(e){
e.preventDefault();
};
//
oImg1.ondragstart = function(e){
e.dataTransfer.setData('text', e.target.id);
};
oBox1.ondrop = dropImg;
oBox2.ondrop = dropImg;
};
function dropImg(e){
e.preventDefault();
var tempImg = document.getElementById(e.dataTransfer.getData('text'));
e.target.appendChild(tempImg);
}

涉及知识点

在拖放的过程中会触发以下事件：
在拖动目标上触发事件 (源元素)
　　ondragstart - 用户开始拖动元素时触发
　　ondrag - 元素正在拖动时触发
　　ondragend - 用户完成元素拖动后触发

释放目标时触发的事件
　　ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
　　ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
　　ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
　　ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

event对象（以e代替）

e.target

　　W3Cschool上的解释是：返回触发此事件的元素（事件的目标节点），这个target属性只兼容ie9及以上

e.preventDefault()

　　取消事件的默认动作。

e.dataTransfer.setData()

　　设置被拖数据的数据类型和值：

e.dataTransfer.getData()

　　获得被拖的数据：

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/oovwall/p/5213580.html

您可能想查找下面的文章:

2018-12-03什么是消息通信？关于消息通信的实例汇总
2017-08-06HTML5 自动聚焦(autofocus)属性使用介绍
2017-08-06如何用H5实现一个触屏版的轮播器的实例
2018-12-03如何用SVG制作酷炫动态图标?（代码实例）
2018-12-03HTML5之5 __Canvas: 渐变
2017-08-06HTML5 贪吃蛇游戏实现思路及源代码
2017-08-06HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2018-12-03HTML5中缩略词标记的重要作用
2018-12-03html5 main标签是什么意思？html5 main标签作用的详细介绍
2018-12-03原生拖拽的相关内容推荐

HTML5如何实现元素拖拽_html5教程技巧

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容