HTML5深入学习之鼠标跟随，拖拽事件
知识点（鼠标跟随）：
- mousedown: 当用户用鼠标点击在某一元素上就会触发该事件
- mouseover: 当鼠标指针在某一元素上移动就会触发改事件
下面这个例子的效果就是鼠标点击元素后，元素跟着鼠标移动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>独秀不爱秀</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#one {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="one"></div>
<script type="text/javascript">
window.onload = function () {
var one = document.getElementById('one');
// mousedown鼠标事件：当用户点击鼠标在元素上就会触发该事件
one.addEventListener('mousedown', function () {
// mousemove 鼠标事件：当鼠标指针在元素上移动就会触发此事件
/**
* e：指事件，在火狐浏览器中事件用window.event,所以只有把 event
* 所以只有把event传给函数使用。为了兼容火狐和浏览器，一般会在函数里自动
* 重新赋值: e = e || window.event;
*/
document.addEventListener('mousemove', function (e) {
one.style.left = e.clientX + 'px';
one.style.top = e.clientY + 'px';
});
});
}
</script>
</body>
</html>
知识点（鼠标拖拽）
- dragstart: 用户开始拖拽时触发该事件
- drag: 用户正在拖拽时触发该事件
- dragend: 用户结束拖拽时触发该事件
以上3个事件的控制对象为被拖拽的元素 （整个过程我们可以称之为拖拽区）
- dragenter: 当被拖拽的元素对象进入其容器范围内时触发该事件
- dragover: 当被拖拽的元素对象在其容器范围内拖拽时触发该事件
- dragleave: 当被拖拽的元素对象离开其容器范围内触发该事件
- drop: 在一个拖拽过程中，鼠标释放触发该事件
以上4个事件的控制对象为被拖追元素的目的容器（整个过程我们可以称之为投放区）
实例1（将一个容器拖放到另一个容器中）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>独秀不爱秀</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#one {
width: 200px;
height: 200px;
border: 1px solid rebeccapurple;
}
#two {
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="one"></div><br>
<!-- draggable属性：设置改元素是否能够被拖拽 -->
<div id="two" draggable="true"></div>
<script type="text/javascript">
window.onload = function () {
function $(id) {
return document.getElementById(id);
} // 鼠标拖拽事件(注意控制对象为被拖拽的元素)
// dragstart: 用户开始拖拽时触发
$('two').addEventListener('dragstart', function (e) {
// $('one').innerHTML = '开始拖拽';
});
// drag: 用户正在拖拽时触发
$('two').addEventListener('drag', function (e) {
// $('one').innerHTML = '移动当中';
});
// dragend:用户结束拖拽时触发
$('two').addEventListener('dragend', function (e) {
// $('one').innerHTML = '移动结束';
}); // 投放过程事件(注意控制对象为拖拽元素的目的地元素)
// dragenter: 当被拖拽的元素对象进入其范围内时触发
$('one').addEventListener('dragenter', function (e) {
// $('one').innerHTML = '进入';
e.preventDefault(); // 阻止默认事件
});
// dragover: 当被拖拽的元素对象在该容器范围内拖拽时触发
$('one').addEventListener('dragover', function (e) {
// $('one').innerHTML += '我就在里面';
e.preventDefault(); // 阻止默认事件（拖动的默认事件为在新窗口中打开）
});
// dragleave: 当被拖拽的元素对象离开其容器范围内触发
$('one').addEventListener('dragleave', function (e) {
// $('one').innerHTML += '离开';
e.preventDefault(); // 阻止默认事件
});
// 投放事件(注意控制对象为拖拽元素的目的地元素)
// drop: 在一个拖动过程中，鼠标释放触发
$('one').addEventListener('drop', function () {
$('one').appendChild($('two'));
});
}
</script>
</body>
</html>
实例2(文件拖拽上传)
前端代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>独秀不爱秀</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
border: 2px dashed #ccc;
}
</style>
</head>
<body>
<div id="box">请拖入文件进行上传！很炫酷哟！</div>
<script type="text/javascript">
var box = document.getElementById('box');
box.addEventListener('dragenter', function (e) {
e.preventDefault();
});
box.addEventListener('dragover', function (e) {
box.innerHTML = '已有东西进入，请松开';
e.preventDefault();
});
box.addEventListener('dragleave', function (e) {
box.innerHTML = '赶紧回来';
e.preventDefault();
});
box.addEventListener('drop', function (e) {
box.innerHTML = '已经松开';
// console.log(e.dataTransfer.files[0]);
// lastModified: 1561646705661
// lastModifiedDate: Thu Jun 27 2019 22: 45: 05 GMT + 0800(中国标准时间) { }
// name: "个人简历.pdf"
// size: 196022
// type: "application/pdf" var file = e.dataTransfer.files[0];
var fd = new FormData();
fd.append('pic', file); var xhr = new XMLHttpRequest();
xhr.open('post', '3-3.php');
xhr.send(fd);
xhr.addEventListener('readystatechange', function () {
if (this.readyState === 4) {
// console.log(1111);
// console.log(this.responseText);
box.innerHTML += this.responseText;
}
});
e.preventDefault();
});
</script>
</body>
</html>
后端代码（PHP实现）：
if (isset($_FILES)) {
$orgin = $_FILES['pic']['tmp_name'];
$target = $_FILES['pic']['name'];
$moved = move_uploaded_file($orgin, './' . $target);
if (!$moved) {
echo '上传失败';
}
echo ', 且上传成功';
}
当我们将某一文件（这里我用一张图片）拖f放到这个容器中后，这个图片就到了这个指定得文件夹中。
HTML5深入学习之鼠标跟随，拖拽事件的更多相关文章
- HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态
多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...
- Qt窗口添加鼠标移动拖拽事件
1. .h文件中添加 private: QPoint dragPosition; 2. 在cpp文件中重写鼠标点击和拖拽函数 void ShapeWidget::mousePressEvent( ...
- HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...
- HTML5实战与剖析之原生拖拽(一拖拽历史概述)
提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了.可以用鼠标任意拖拽着一个物体到任何你想去的地方. 最早拥有JavaScript拖拽功能的是IE4浏览器.当时,网页 ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- day50—JavaScript鼠标拖拽事件
转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 完美实现鼠标拖拽事件，解决各种小bug，基于jquery
鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...
- H5原生拖拽事件
使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
随机推荐
- 201800624模拟赛T2——回家路上
题目描述 很多学生都抱怨浪费在回家路上的时间太长.这天dongdong刚走出学校大门,就听说某段路在施工(但不知道是哪条路),有可能导致他回家的时间会变长. Dongdong给出了一张地图,图中标号为 ...
- WooCommerce代码合集整理
本文整理了一些WooCommerce代码合集,方便查阅和使用,更是为了理清思路,提高自己.以下WooCommerce简称WC,代码放在主题的functions.php中即可. 修改首页和分类页面每页产 ...
- CLR Exception 0xE0434F4D和0xE0434352的区别
<根据<CLR Exception---E0434352>和<CLR Exception---E0434F4D>这两篇随笔,我们会发现,这两个异常太相似了,除了代码值不一 ...
- List 拆分集合与 读写XML配置文件
有时候会出现需要将一个集合分成所干个集合,依次再对每组集合进行处理,想了想,用 Linq 处理就很方便 ); ).Take(); //第一组 ).Take(); //第二组 ; i < time ...
- 【Gamma阶段】第六次Scrum Meeting
冰多多团队-Gamma阶段第六次Scrum会议 工作情况 团队成员 已完成任务 待完成任务 卓培锦 编辑器风格切换(添加夜间模式) UI界面手势切换 牛雅哲 语音输入shell应用:基于pytorch ...
- Alpha冲刺——总结篇
课程信息 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Alpha冲刺 团队目标 切实可行的计算机协会维修预约平台 团队信息 队员学号 队员姓名 个人博客地址 备注 22 ...
- Linux内核模块管理命令
1.insmod命令 在Linux系统下,insmod命令用于将给定的模块加载到内核中去,Linux系统有许多功能是通过模块的方式,在需要时才载入kernel,这样做可以使kernel较为精简,进而提 ...
- laravel 可以做什么
laravel 可以做什么? Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来:它可以帮你构建一个完美的网络APP ...
- python 将列表里的字典元素合并为一个字典
python 将列表里的字典元素合并为一个字典 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn. ...
- C#调用摄像头（AForge）实现扫描条码解析（Zxing）功能
网上找了很多代码,都比较零散,以下代码纯自己手写,经过测试.下面有链接,下载后可以直接使用. 介绍: 自动识别:点击Start按钮会调用PC摄像头,代码内置Timer,会每100毫秒识别一下当前摄像头 ...