仿h5拖拽
在h5中有个拖拽的声明式命令，就如html属性一样，简单强大。
而在网页上拖拽的功能还是需求很大的，所以对这方面应该去仔细了解一下。
所以仿一一下它的实现。只是仿了它的复制一份到目标容器的功能。它还有很多功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.dragBox{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
.dragBox:after{
content: "";
display: block;
position: absolute;
width: 40px;
height: 40px;
border: 1px solid #eee;
left: -20px;
top: 0px;
border-left:1px solid #ff7600;
border-top: 1px solid #ff4500;
transform: rotate(-10deg);
}
.dragBox:before{
content: "";
display: block;
position: absolute;
width: 40px;
height: 40px;
border: 1px solid #eee;
right: 0px;
top: -20px;
border-left:1px solid #ff7600;
border-top: 1px solid #ff4500;
transform: rotate(90deg);
}
.target{
position: absolute;
top: 200px;
left: 50px;
width: 100%;
height: 100px;
}
.opacity{
opacity: .5;
}
.border{
border: 1px dashed #000;
}
.target01{
position: absolute;
top: 10px;
left: 0;
width: 80%;
height: 50px;
}
</style> <div class="dragBox target0"> </div> <div class="target">
<div class="target01"></div>
</div> <script>
/*容器位置*/
var posData=[{top:pos($(".target")).top,left:pos($(".target")).left,obj:$(".target"),placePosJudge:false},
{top:pos($(".target01")).top,left:pos($(".target01")).left,obj:$(".target01"),placePosJudge:false}];
function $(objStr){
return document.querySelector(objStr);
}
/*获取单个容器位置，相对于window的位置*/
function pos(obj,offset){
if(!offset){
offset={top:0,left:0};
}
offset.top+=obj.offsetTop;
offset.left+=obj.offsetLeft;
if(!obj.offsetParent){
return offset;
}
return pos(obj.offsetParent,offset);
}
(function(undefined){
var oDargBox=$(".dragBox");
var oDiv=$(".target");
document.onmousedown=function(e){
e=e||window.event;
if(e.target.className.indexOf("target0")!=-1){
var obj=e.target,
objClone=obj.cloneNode(true),
posX=e.clientX-obj.offsetLeft,
posY=e.clientY-obj.offsetTop,
index=-1;
objClone.classList.add("opacity");
document.body.appendChild(objClone);
document.onmousemove=function(e){
e=e||window.event;
var X=e.clientX-posX,Y=e.clientY-posY;
objClone.style.left=X+"px";
objClone.style.top=Y+"px";
/*使用碰撞检测来检测容器范围*/
for(var i=0;i<posData.length;i++){
if(posData[i].top<Y+100&&
Y<posData[i].top+300&&
posData[i].left<X+100&&
X<posData[i].left+300){
for(var j=0;j<posData.length;j++){
posData[j].placePosJudge=false;
}
posData[i].placePosJudge=true;
posData[i].obj.classList.add("border");
}else{
posData[i].obj.classList.remove("border");
}
}
}
document.onmouseup=function(){
objClone.classList.remove("opacity");
document.onmousemove=document.onmouseup=null;
for(var i=0;i<posData.length;i++){
posData[i].obj.classList.remove("border");
if(posData[i].placePosJudge){
posData[i].obj.appendChild(objClone);
objClone.style.position="relative";
objClone.style.top="0";
objClone.style.left="0";
return false;
}
} document.body.removeChild(objClone);
return false;
} }
}
})()
</script>
</body>
</html>
仿h5拖拽的更多相关文章
- H5拖拽 构造拖拽及缩放 pdf展示
前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...
- H5 拖拽读取文件和文件夹
1)拖拽方面的重点是:ondragover 事件 和 ondrop 事件 ondragover 是必须的,ondragover 事件里禁用掉 html 的默认事件,否则 ondrop 事件将无效(直接 ...
- H5拖拽 构造拖拽及缩放 pdf文件转换为html预览
前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...
- js仿QQ拖拽删除
原生js实现仿QQ拖拽删除交互,无需任何依赖. 项目演示请看这里, gitHub请移步这里. 由于源码很长,所以贴到最下面了. 效果截图如下: 核心思想呢,就是点击圆点的时候全屏覆盖个canvas,在 ...
- H5 拖拽操作
H5 拖拽操作 前言 在原生H5中,可以通过提供的api实现在网页内元素的拖拽操作.相对于传统的写法更加的简单. 而想要实现拖拽,主要需要进行两个方面的工作,第一是给元素设置draggable='tr ...
- h5拖拽上传图片
h5实现拖拽上传图片 本文将为大家介绍如何通过js实现拖拽上传图片. 首先我们要禁用调浏览器默认的拖拽事件: window.onload = function(){ //拖离 document.add ...
- H5 拖拽,一个函数搞定,直接指定对象设置可拖拽
页面上,弹个小窗体,想让它可以拖拽,又不想 加载一堆js,就简单的能让他可以拖动? 嗯,下面有这样一个函数,调用下就好了! 1. 先来说说 H5的 拖拽 在 HTML5 中,拖放是标准的一部分,任何元 ...
- H5 拖拽元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果
探探/Tinder是一个很火的陌生人社交App,趁着国庆假期闲暇时间倒腾了个Nuxt.js项目,项目中有个模块模仿探探滑动切换界面效果.支持左右拖拽滑动like和no like及滑动回弹效果. 一览效 ...
随机推荐
- Jedis 使用范例
public class RedisUtil { Logger logger = LoggerFactory.getLogger(RedisUtil.class); private JedisPool ...
- 记录同事的一个bug-ajax-413错误-fullhead
症状表现为在form下面的textarea里的字符数只有几十个的时候,请求可以成功,但是如果有几百字,则会出现413错误,提示fullhead,我第一反应是cookie体积太小,但是清了缓存还是一样的 ...
- Ubuntu安装Wildfly(原JBoss)并为其配置MySQL分布式数据源
注:JBoss在8.0版本后改名为WildFly,以JBoss命名的版本最高为7.1.1.Final,但JBoss7.1.1.Final不支持jdk1.8以上版本,如果在jdk1.8情况下安装JBos ...
- var a=b=c=1; 和 var a=1, b=2, c=3; 的区别。
function test(){ var a=b=c=1; var a=1, b=2,c=3; } 1中b\c 为全局变量, a为私量 2中a\b\c为私量
- java分享第十九天（TestNg的IReporter接口的使用）
IReporter接口是干嘛的?就是让用户自定义报告的,很多人想要自定义报告,于是乎找各种插件,比如什么testng-xslt啊,reportng啊,各种配置,最后出来的结果,还不能定制化,但为什么 ...
- sqlplus运行sql文件
当sql文件的数据比较多的时候,pl/sql运行比较慢,可以通过oracle的sqlplus进行导入: sqlplus user/password@tnsname@sqlfile.sql; 注意如果文 ...
- jQuery extend扩展String原型
jQuery.extend(String.prototype, { isPositiveInteger:function(){ return (new RegExp(/^[1-9]\d*$/).tes ...
- 最小生成树 prime zoj1586
题意:在n个星球,每2个星球之间的联通需要依靠一个网络适配器,每个星球喜欢的网络适配器的价钱不同,先给你一个n,然后n个数,代表第i个星球喜爱的网络适配器的价钱,然后给出一个矩阵M[i][j]代表第i ...
- python 函数之day3
一 函数的语法及特性 什么是函数? 定义:函数是一个功能通过一组语句的集合,由名字(函数名)将其封装起来的代码块,要想执行这个函数,只要调用其函数名即可. 特性: 减少重复代码 使程序变的可扩展 使程 ...
- 原来scanf读入字符串还能这样..
(本文针对于NOIP Day1 玩具迷题) (这是弱鸡写的)(字符串用char二维,本质一样的) 在NOIP成功AC了这道题,结果OJ上被string卡了时间,没办法只能用scanf了.....百度看 ...