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小实例：拖拽应用（二）
经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...
随机推荐
- PAT甲级——A1086 Tree Traversals Again
An inorder binary tree traversal can be implemented in a non-recursive way with a stack. For example ...
- 《DSP using MATLAB》Problem 7.36
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- Referenced assembly does not have a strong name
Step 1 : Run visual studio command prompt and go to directory where your DLL located. For Example my ...
- mysql emoji存储问题
偶然存储一条用户记录的时候,发现mysql一直报错 mysql_real_query failed:Incorrect stringvalue: '\xF0\x9F\x98\x8E T...' for ...
- windows API 第九篇 _tcslwr _strlwr _wcslwr _mbslwr
将字符串转化为小写Convert a string to lowercase. 函数原型: char *_strlwr( char *string ); //#include ...
- 联想 Z470个人安装黑苹果参考
笔记本是联想 Z470,cpu i3-2350M 傻瓜图文式]Win系统下制作U盘CLOVER引导 EDIT部分 进去黑屏 U盘引导盘
- Linux下使用SSH命令行传输文件到远程服务器
目标:CentOS 7 调整 home分区 扩大 root分区 总体过程: 把/home内容备份,然后将/home文件系统所在的逻辑卷删除,扩大/root文件系统,新建/home ,恢复/home内容 ...
- [转]WPF命令集 Command
在我们日常的应用程序操作中,经常要处理各种各样的命令和进行相关的事件处理,比如需要复制.粘贴文本框中的内容;上网查看网页时,可能需要返回上一网页查看相应内容;而当我们播放视频和多媒体时,我们可能要调节 ...
- gitlab不支持mysql，这就是我学习PostgreSQL的原因
Gitlab 官方宣布,将从 12.1 版本开始不再支持 MySQL 数据库.早在 2017年7月,Gitlab 就计划将弃用对 MySQL 的支持.而目前这个决定将从 12.1 版本开始. 编辑注: ...
- SQL的特点
1.综合统一 2.高度非过程化 3.面向集合的操作方式 4.一同一种语法结构提供两种使用5.语言简洁易学易用