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小实例：拖拽应用（二）
经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...
随机推荐
- 移动端开发框架Zepto.js
一.概述 Zepto.js是一个轻量的js库,它与jQuery有类似的API. zepto的设计目的是不到10K的通用库,快速下载,有一个熟悉的api-->精力专注在开发上. 流行起来的原因:轻 ...
- 02_jQuery对象初识（二）筛选器1
0. HTML对象和jQuery对象的区别: 1.jQuery对象转换成DOM对象,用索引取出具体的标签 2.DOM对象转换成jQuery对象,$(DOM对象) 注意:jQuery对象保存到变量的时候 ...
- js 实现音频播放与暂停
html: <script src="js/jquery-2.1.3.min.js"></script> <div id="soundIco ...
- sql 递归查询，查出所有子节点
with t as ( select b.* from Base_Department b where ParentId = 'cce4152c-3483-4334-b68d-155da627bca0 ...
- quartz 定时任务配置文件信息
quartz 定时任务配置文件有五大要素,配置好这五大要素,quartz 就能够正常的工作. 五大要素分别是: 1.工作的 bean:具体是哪个 Java 类来作为定时任务的文件入口,并配置该 bea ...
- Python之MySQL语法（增删改查）
-- ID: 新闻的唯一标示 -- title: 新闻的标题 -- content: 新闻的内容 -- created_at: 新闻添加的时间 -- types: 新闻的类型 -- image: 新的 ...
- 深入浅出 Java Concurrency (3): 原子操作 part 2[转]
在这一部分开始讨论数组原子操作和一些其他的原子操作. AtomicIntegerArray/AtomicLongArray/AtomicReferenceArray的API类似,选择有代表性的Atom ...
- netbeans 8.2 系统找不到指定的文件。
系统找不到指定的文件.Using CATALINA_BASE: "C:\Users\wishr\AppData\Roaming\NetBeans\8.2\apache-tomcat-8.0. ...
- 关于解码芯片SAA7115及7105的配置 ，FVID与微驱动
最近因为在做视频处理,所以和解码芯片打交道很多,根据DM642的例程总了一些应该配置的东西. 注:以下的配置均是指AV信号输入,PAL制式输出的条件 (一)关于SAA7115(基于TI的驱动) 结构体 ...
- Java程序员面试题收集（5）
Java基础方面: 1.作用域public,private,protected,以及不写时的区别 答:区别如下: 作用域 当前类 同一package 子孙类 其他package public √ √ ...