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小实例：拖拽应用（二）
经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...
随机推荐
- vue-cli 目录结构详细讲解
https://juejin.im/post/5c3599386fb9a049db7351a8 vue-cli 目录结构详细讲解 目录 结构预览 ├─build // 保存一些webpack的初始化配 ...
- 用Axure RP7创建响应式原型教程
自从几年前响应式技术开始应用时,创建响应式原型就成为了很多人苦恼的事情.响应式设计用一种非常优雅的方式处理为多种设备类型使用HTML和CSS编码的应用,但是提供给UX专业人士的原型工具却没有具备同样品 ...
- 《DSP using MATLAB》Problem 8.25
用match-z方法,将模拟低通转换为数字低通 代码: %% --------------------------------------------------------------------- ...
- DSP using MATLAB》Problem 8.16
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- Install- Linux必学的60个命令
1.作用 install命令的作用是安装或升级软件或备份数据,它的使用权限是所有用户. 2.格式 (1)install [选项]... 来源 目的地 (2)install [选项]... 来源... ...
- PKUWC 2018 真实排名
PKUWC2018 真实排名 题面描述 共有\(n\)个人,每个人有一个能力值,每个人的排名为所有能力值不比他小的人的个数(包括他自己). 现在有\(k\)个人能力值翻倍,但我们无法得知是哪\(k\) ...
- C++ 赋值函数为什么返回reference to *this?
赋值操作为什么要返回 reference to *this? 要弄清这个问题之前,先了解函数的返回值类型:返回值类型,返回引用类型 返回值类型:返回的是一个对象的副本. test operator= ...
- HZOI2019 B. 那一天她离我而去 最小环
题目大意:https://www.cnblogs.com/Juve/articles/11219089.html 那一天,我们......行啦,不要帮出题人脑补画面了,我们来正经的题解 我们发现我们可 ...
- Python技巧—list与字符串互相转换
Python技巧-list与字符串互相转换 在Python的编程中,经常会涉及到字符串与list之间的转换问题,下面就将两者之间的转换做一个梳理. 1.list转换成字符串 命令:list() 例子: ...
- 改变swiper 按钮swiper-button-next 颜色
温馨提示:一般如果一个项目只需要一两处使用swiper时,不需要把swiper的css文件引进去,只需要把需要的几个类在swiper.css中复制出来,粘贴到自己的项目css中即可. 改变按钮颜色(红 ...