H5 拖拽元素
<!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;
}
.div3{
width: 200px;
height: 200px;
border: 1px solid green;
position: relative;
margin-left:20px;
float: left;
}
p{
background-color: orange;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="div1" id="div1">
<!--在h5中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽-->
<p id="pe" draggable="true">试着把我拖过去</p>
<p id="pe1" draggable="true">试着也把我拖过去</p>
</div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<script>
/*学习拖拽，主要就是学习拖拽事件*/
var obj=null;//当前被拖拽的地元素 /*应用于被拖拽元素的事件
*ondrag 应用于拖拽元素，整个拖拽过程都会调用--持续
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素，当拖拽结束时调用*/
document.ondragstart=function(e){
/*通过事件捕获来获取当前被拖拽的子元素*/
e.target.style.opacity=0.5;
e.target.parentNode.style.borderWidth="5px";
obj= e.target;
/*通过dataTransfer来实现数据的存储与获取
* setData(format,data):
* format:数据的类型：text/html text/uri-list
* Data:数据:一般来说是字符串值*/
e.dataTransfer.setData("text/html", e.target.id);
}
document.ondragend=function(e){
e.target.style.opacity=1;
e.target.parentNode.style.borderWidth="1px";
}
document.ondragleave=function(e){
}
document.ondrag=function(e){
} /*应用于目标元素的事件
*ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素，当鼠标离开目标元素时调用*/
document.ondragenter=function(e){
console.log(e.target);
}
document.ondragover=function(e){
/*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/
e.preventDefault();
}
/*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/
document.ondrop=function(e){
/*添加元素*/
//e.target.appendChild(obj);
/*通过e.dataTransfer.setData存储的数据，只能在drop事件中获取*/
var id=e.dataTransfer.getData("text/html");
/*console.log("id="+id);*/
e.target.appendChild(document.getElementById(id));
}
document.ondragleave=function(e){
}
</script>
</body>
</html>
H5 拖拽元素的更多相关文章
- H5拖拽 构造拖拽及缩放 pdf展示
前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...
- H5 拖拽,一个函数搞定,直接指定对象设置可拖拽
页面上,弹个小窗体,想让它可以拖拽,又不想 加载一堆js,就简单的能让他可以拖动? 嗯,下面有这样一个函数,调用下就好了! 1. 先来说说 H5的 拖拽 在 HTML5 中,拖放是标准的一部分,任何元 ...
- H5拖拽 构造拖拽及缩放 pdf文件转换为html预览
前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...
- H5 拖拽操作
H5 拖拽操作 前言 在原生H5中,可以通过提供的api实现在网页内元素的拖拽操作.相对于传统的写法更加的简单. 而想要实现拖拽,主要需要进行两个方面的工作,第一是给元素设置draggable='tr ...
- JavaScript实现拖拽元素对齐到网格（每次移动固定距离）
这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...
- juqery 拖拽元素
转自 http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQue ...
- H5 拖拽读取文件和文件夹
1)拖拽方面的重点是:ondragover 事件 和 ondrop 事件 ondragover 是必须的,ondragover 事件里禁用掉 html 的默认事件,否则 ondrop 事件将无效(直接 ...
- 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题
被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...
- vue-drag-resize 可拖拽可缩放的标签，如何管理多个拖拽元素之间的zIndex？操作上需要保持当前激活的组件是最上层，但是在总体上，又要确保其图层管理的顺序。
麻烦总是不断出现,还好办法总比困难多, 1.公司开发一款可视化编辑html网页的多媒体编辑平台,牵扯到标签元素的拖拽,缩放,我找了找方法发现原生技术实现起来代码太多,麻烦,还好找到了一个vue组件,可 ...
随机推荐
- 移动端适配之二：visual viewport、layout viewport和ideal viewport介绍
上一篇博文,可算把像素这个东西讲清楚了.在这篇博文里面,将继续介绍viewport相关的内容. 很多博客都会提到PPK所讲的三个viewport,有的讲的比较复杂,看的云里雾里,我这里也大概介绍一下, ...
- 写GULP遇到的ES6问题详解
Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.最近复习一下gulp一些基本的写法,在写了一些简单的uglify,rename,concat,clean的处理之 ...
- C++ 之手写memcpy
#include<iostream>#include<cstdio>using namespace std; void* mymemcpy(void* dst, const v ...
- 【JZOJ4816】【NOIP2016提高A组五校联考4】label
题目描述 输入 输出 样例输入 3 2 2 0 1 2 3 3 2 1 3 1 2 3 3 1 1 2 2 3 样例输出 4 2 12 数据范围 样例解释 解法 设f[i][j]为在第i个点填了j的合 ...
- mac os 使用记录
折腾过一台黑苹果,配置很菜,奔腾G3260和B150M-D2V,具体EFI和配置详见repo Hackintosh 首先要解决的就是写代码问题,mac进行acm(C/C++)编程 VS code天下第 ...
- jdbc框架-dbutils的简单使用
jdbc框架-dbutils的简单使用 dbutils:是apache组织的一个工具类,jdbc的框架,更方便我们使用 使用步骤: 1.导入jar包(commons-dbutils-1.4.jar) ...
- 洛谷 P1505 [国家集训队]旅游 树链剖分
目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例: 输出样例: 说明 思路 AC代码 总结 题面 题目链接 P1505 [国家集训队]旅游 题目描述 Ray 乐 ...
- 基于GD库的php验证码类（支持中英文字体、背景、干扰点线、扭曲…….）
转自:http://www.blhere.com/1168.html 12345678910111213141516171819202122232425262728293031323334353637 ...
- Notepad++中Python脚本运行出现语法错误：IndentationError: unindent does not match any outer indentation level
使用Notepad++编辑python代码运行遇到了这个问题: IndentationError: unindent does not match any outer indentation leve ...
- Ui自动化测试框架
为了提高我们的UI测试效率,我们引用Ui自动化测试框架,这里简单先描述一下,后续会详细补充: 了解一个测试框架,我们就需要了解一下源码,能看懂源码即可: 1.稳定先封装wait EC,电脑性能配置较好 ...