H5C3--拖拽接口的使用和实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
margin-left:20px;
float: left;
}
.div2{
width: 200px;
height: 200px;
border: 1px solid blue;
position: relative;
margin-left:20px;
float: left;
}
p{
background-color: orange;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="div1" id="div1">
<p id="pe" draggable="true">试着把我拖过去</p>
<p id="pe2" draggable="true">试着把我也拖过去吧！！！</p>
</div>
<div class="div2" id="div2"></div>
<script>
/*拖拽事件
* 1.针对于“被拖拽元素”的事件
* ondragstart:开始拖拽时触发，一次拖拽只会触发一次 touchstart
* ondrag:拖拽过程中(没有松开鼠标)持续触发 touchmove
* ondragleave:拖拽元素离开原始的范围，它的参照是当前鼠标拖拽点，一次拖拽只会触发一次
* ondragend:结束拖拽时触发。一次拖拽只会触发一次 touchend
*
* 2.针对于目标元素的事件
* ondragenter:当被拖拽元素进入到目标元素时触发
* ondragover:当被拖拽元素在目标元素上方时持续触发
* ondragleave:当被拖拽元素离开目标元素时触发
* ondrop:当被拖拽元素在目标元素上方时松开鼠标时触发*/ /*隆重介绍拖拽事件的核心：事件源参数*/ var pe = document.querySelector('#pe');
var div2 = document.querySelector('#div2'); pe.ondragstart = function (e) {
// console.log('开始拖拽');
/*e.target:当前真正响应事件的对象*/
e.target.parentNode.style.borderWidth = '10px';
}
pe.ondrag = function (e) {
// console.log('拖拽过程中');
}
pe.ondragleave = function (e) {
// console.log('拖拽元素中鼠标离开被拖拽的区域');
}
pe.ondragend = function (e) {
// console.log('拖拽结束');
e.target.parentNode.style.borderWidth = '1px';
} div2.ondragenter = function (e) {
console.log('拖拽进入div2区域');
}
div2.ondragover = function (e) {
/*默认情况下，一个元素并不允许将其它的元素挺拖入到这个元素内部，它会阻止你这样的操作，如果想实现拖拽操作，就必须在over事件中阻止它的默认行为*/
e.preventDefault();
console.log('拖拽进入div2上方');
}
div2.ondragleave = function (e) {
console.log('拖拽离开div2区域');
}
div2.ondrop = function (e) {
div2.appendChild(pe);
console.log('拖拽进入div2上方并松开鼠标');
} </script>
</body>
</html>
针对所有元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
margin-left:20px;
float: left;
}
.div2{
width: 200px;
height: 200px;
border: 1px solid blue;
position: relative;
margin-left:20px;
float: left;
}
p{
background-color: orange;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="div1" id="div1">
<p id="pe" draggable="true">试着把我拖过去</p>
<p id="pe2" draggable="true">试着把我也拖过去吧！！！</p>
</div>
<div class="div2" id="div2"></div>
<script>
/*拖拽事件
* 1.针对于“被拖拽元素”的事件
* ondragstart:开始拖拽时触发，一次拖拽只会触发一次 touchstart
* ondrag:拖拽过程中(没有松开鼠标)持续触发 touchmove
* ondragleave:拖拽元素离开原始的范围，它的参照是当前鼠标拖拽点，一次拖拽只会触发一次
* ondragend:结束拖拽时触发。一次拖拽只会触发一次 touchend
*
* 2.针对于目标元素的事件
* ondragenter:当被拖拽元素进入到目标元素时触发
* ondragover:当被拖拽元素在目标元素上方时持续触发
* ondragleave:当被拖拽元素离开目标元素时触发
* ondrop:当被拖拽元素在目标元素上方时松开鼠标时触发*/ /*隆重介绍拖拽事件的核心：事件源参数*/ var obj = null;
document.ondragstart = function (e) {
// console.log('开始拖拽');
/*e.target:当前真正响应事件的对象*/
// e.target.parentNode.style.borderWidth = '10px';
obj = e.target; //通过dataTransfer来传递数据
/*你可以简单的理解为键值对,值必须是字符串
* format:text/html | text/plain | Text*/
//e.dataTransfer.setData("text/html", e.target.id);
/*if(navigator.userAgent.indexOf("MSIE")){ }*/ }
document.ondrag = function (e) {
// console.log('拖拽过程中');
}
document.ondragleave = function (e) {
// console.log('拖拽元素中鼠标离开被拖拽的区域');
}
document.ondragend = function (e) {
// console.log('拖拽结束');
e.target.parentNode.style.borderWidth = '1px';
} document.ondragenter = function (e) {
console.log('拖拽进入div2区域');
}
document.ondragover = function (e) {
/*默认情况下，一个元素并不允许将其它的元素挺拖入到这个元素内部，它会阻止你这样的操作，如果想实现拖拽操作，就必须在over事件中阻止它的默认行为*/
e.preventDefault();
console.log('拖拽进入div2上方');
}
document.ondragleave = function (e) {
console.log('拖拽离开div2区域');
}
document.ondrop = function (e) {
e.target.appendChild(obj);
//var id = e.dataTransfer.getData("text/html");
//e.target.appendChild(document.getElementById(id));
console.log('拖拽进入div2上方并松开鼠标');
} </script>
</body>
</html>
H5C3--拖拽接口的使用和实例的更多相关文章
- 从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 原生js拖拽功能制作滑动条实例教程
拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...
- [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...
- react-dnd 拖拽
介绍 React DnD 是一组 React 高阶组件,可以用来帮你构建复杂的拖拽接口,同时解耦你的组件.React DnD 非常适合像 Trello 和 Storify 这样的应用,在不同地方通过拖 ...
- 【转】IE沙箱拖拽安全策略解析
https://xlab.tencent.com/cn/2015/12/17/ie-sandbox-drop-security-policy/ IE沙箱逃逸是IE浏览器安全研究的一个重要课题,其中有一 ...
- 强大的拖拽组件：React DnD 的使用
强大的拖拽组件:React DnD 的使用 react.js 10.6k 次阅读 · 读完需要 25 分钟 17 文章首发我的个人blog : 原文链接 学习 React DnD 的最初原因是阅读 ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 根据HTML5的新方法 drag & drop 方法实现表格拖拽实例
上一次学习了html5的drag和drop方法,传送门 就自己写了个例子加深自己对drag和drop的理解.不过一开始不是很简单,遇到了不少问题.还好网络万能的,什么都能查到,总算完成了. 说明和详 ...
- JavaScript小实例：拖拽应用（二）
经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...
随机推荐
- exiftool(-k)与gui的联合使用
首先下载一个exiftool下载后改名字https://sno.phy.queensu.ca/~phil/exiftool/ 根据自己的操作系统选择,我需要这个 然后下载guihttp://u88.n ...
- 02_Hibernate持久化配置
一.hibernate对象持久化 Web开发的分层: 为了把数据访问细节和业务逻辑分开, 一般把数据访问作为单独的持久化层.DAO是数据访问对象,使用hibernate后,数据访问对象中操作的API将 ...
- PKU--3628 Bookshelf 2（01背包）
题目http://poj.org/problem?id=3628 分析:给定一堆牛的高度,把牛叠加起来的高度超过牛棚的高度. 且是牛叠加的高度与牛棚高度之差最小. 把牛叠加的高度看作是背包的容量,利用 ...
- Spring Cloud Eureka 使用外网IP和端口号进行服务注册
应用场景如下: 服务提供方(即要注册到服务中心的服务)的内网地址,外界无法访问(或者使用docker等做了应用端口等的配置),做了IP映射后,公网IP49.10.22.106映射到服务提供方的内网ip ...
- 2019-8-26-当-ASP.NET-Core-链接找不到时可能的原因
title author date CreateTime categories 当 ASP.NET Core 链接找不到时可能的原因 lindexi 2019-08-26 18:52:28 +0800 ...
- __name__变量
再写项目过程中,将功能函数写在 if __name=="__main__":之外,执行代码写在之中,如下:如果在foo模块打印__name__为__main__,而如果在bin模 ...
- MICROSOFT SQL SERVER 2012 序列号
MICROSOFT SQL SERVER DEVELOPER 版(开发版) 序列号:YQWTX-G8T4R-QW4XX-BVH62-GP68Y MICROSOFT SQL SERVER ENTERPR ...
- centos 安装系列
装coreseek https://www.jb51.net/os/RedHat/462185.html 卸载mysql https://www.cnblogs.com/cyl048/p/687908 ...
- Office2010 破解（Microsoft Toolkit 2.4.3.exe）
这两天破解刚安装好的office2010,总是报错 刚才重新下载了Microsoft Toolkit 2.4.3.exe工具后,破解成功,操作如下: 选择office按钮后,如下操作,
- Android SDK上手指南：Activity与生命周期
Android SDK上手指南:Activity与生命周期 2013-12-26 15:26 核子可乐译 51CTO 字号:T | T Activity生命周期并不仅仅在用户运行应用程序之后才开始生效 ...