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组件,可 ...
随机推荐
- PHP数据加密和解密
encrypt.php <?php /** * Passport 加密函数 * * @param string 等待加密的原字串 * @param string 私有密匙(用于解密和加密) * ...
- 计算机网络5.2-5 ipv4&路由协议&ipv6
子网变址技术 子网掩码 默认子网掩码 子网地址 广播地址 一些计算 CIDR 分配举例 地址不必连续分配 sadsdas 网络设备---路由器 输出结构 直接交付与简介交付 IP分组的转发 分属于不同 ...
- 【水滴石穿】react-native-video-project
感觉这个是很有才华的博主,毕竟是可以在npm 包里面留后门的程序员 博主的gihtub关于这个项目的地址是:https://github.com/ikimiler/react-native-video ...
- Mac下搭建python开发环境
目录 1. 安装brew 2. 安装 mysql 3. 安装 pycharm 4. 安装python3.6 5. 安装virtualenvwrapper 6. 虚拟环境下安装mysqlclient 1 ...
- Directx11教程(42) 纹理映射(12)-简单的bump mapping
原文:Directx11教程(42) 纹理映射(12)-简单的bump mapping 有时候,我们只有一个粗糙的模型,但是我们想渲染纹理细节,比如一个砖墙,我们如何在只有一个平面的时候 ...
- 使用 Windows 10 WSL 搭建 ESP8266 编译环境并使用 VSCODE 编程（一）（2019-08-23）
目录 使用 Windows 10 WSL 搭建 ESP8266 编译环境并使用 VSCODE 编程 安装前准备 安装 ESP8266 工具链 下载 ESP8266 SDK 编译 花絮 使用 Windo ...
- python 对象（object）
- 基于OSS+DataLakeAnalytics+QuickBI的Serverless的查询分析和可视化BI
基于OSS的数据查询分析和可视化BI报表 数据存储在OSS后,有多种查询分析的方法,包括阿里云MaxCompute.DataLakeAnalytics产品等Severless查询分析服务,也可以自建S ...
- Hdu 1729 Nim博弈
点击打开题目链接 之前没做过这题,因为学弟问到我如果来求该题的sg值,才做了这题. 首先, 是多堆Nim博弈毫无疑问,这题是往一个有固定容量的箱子里放石子,和从一堆石子里面拿出石子是一个道理. 和传统 ...
- 最优化WPF 3D性能（基于“Tier-2”硬件）
原文:最优化WPF 3D性能(基于"Tier-2"硬件) 原文地址:Maximizing WPF 3D Performance on Tier-2 Hardware 开发人员在应用 ...