Drag Layer

最新推荐文章于 2020-05-09 15:09:21 发布
最新推荐文章于 2020-05-09 15:09:21 发布
阅读量1.4k 收藏
点赞数
分类专栏： JavaScript.Ex 文章标签： layer div class border function null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nxmxbbd/article/details/661210
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>drag layer</title>
<style>
body,table{color:#000000;
font-size:12px;
}
div.div_one{}
.dragBar{color:#FFFFFF;
font-weight:bold}
</style>
 <script language="javascript" defer="defer" type="text/javascript"> </script> <script language="javascript" defer="defer" type="text/javascript"> </script> <script language="javascript" defer="defer" type="text/javascript"> </script> <script language="javascript" defer="defer" type="text/javascript"> </script> <script language="javascript" defer>
var tmpElement=null;
var dragElement=null;
var downX,downY,tmp_o_x,tmp_o_y;
var refElement=null;
var dragActive=0;
var draging=0;
function readyDrag(){
dragActive=1;
if(event.srcElement.tagName!="DIV")
return;
dragElement=event.srcElement.parentNode;
tmpElement=dragElement.cloneNode(true);
tmpElement.style.filter="alpha(opacity=90)";
tmpElement.style.zIndex=2;
dragElement.style.zIndex=1;
tmpElement.style.position="absolute";
if(dragElement.parentNode.tagName!="BODY"){
dragElement.style.left=dragElement.offsetLeft+dragElement.parentNode.style.pixelLeft;
dragElement.style.top=dragElement.offsetTop+dragElement.parentNode.style.pixelTop;
}
downX=event.clientX;
downY=event.clientY;
tmp_o_x=dragElement.style.pixelLeft;
tmp_o_y=dragElement.style.pixelTop;
tmpElement.style.visibility="hidden";
document.body.appendChild(tmpElement);
document.οnmοusemοve=startDrag;
}
document.οnmοuseup=endDrag;
function startDrag(){
if(dragActive==1&&event.button==1&&dragElement!=null&&tmpElement!=null){
tmpElement.style.visibility="visible";
tmpElement.style.left=tmp_o_x+event.clientX-downX;
tmpElement.style.top=tmp_o_y+event.clientY-downY;
dragElement.style.backgroundColor="#CCCCCC";
document.body.style.cursor="move";
draging=1;
}
}
function endDrag(){
if(dragActive==1&&tmpElement!=null){
if(draging==1){
dragElement.removeNode(true);
draging=0;
}
tmpElement.style.filter="alpha(opacity=100)";
tmpElement.style.zIndex=1;
document.body.style.cursor="default";
if(refElement!=null&&refElement.parentNode!=null&&refElement.parentNode.tagName!="BODY"){
tmpElement.style.width=refElement.parentNode.style.width;
tmpElement.style.position="";
refElement.parentNode.insertBefore(tmpElement,refElement);
}
}
dragElement=null;
tmpElement=null;
dragActive=0;
}
function readyInsert(){
if(dragActive==1){
var element=event.srcElement;
if(element==dragElement)return;
if(element.tagName!="DIV")
return;
if(element.className=="dragBar"||element.className=="textSheet"||element.className=="blankBar")
element=element.parentNode;
element.style.backgroundColor="#CCCCCC";
element.style.filter="alpha(opacity=50)";
refElement=element;
}
}
function failInsert(){
var element=event.srcElement;
if(element.tagName!="DIV")
return;
try{
if(element.className=="dragBar"||element.className=="textSheet"||element.className=="blankBar")
element=element.parentNode;
}catch(e){}
element.style.filter="alpha(opacity=100)";
element.style.backgroundColor="#FFFFFF";
refElement=null;
}
document.onselectstart=function(){return false}
</script>
</head>
<body>
<div id="div_one" class="div_one" style="position:absolute; left:116px; top:137px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
<div onMouseDown="readyDrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">Window</div>
<div class="textSheet" style="border:1px solid #996666;">Content<br>
Content<br>
Content<br>
Content  <br>
</div>
<div class="blankBar" style="height:10px"></div></div>
<div id="grid1" style="position:absolute; left:534px; top:37px; width:336px; height:15px; z-index: 100; visibility: visible;">
<div style="height:20px;z-index:2;" onMouseOver="readyInsert()" onMouseOut="failInsert();">把层拖动到这儿</div>
</div>
<div id="grid2" style="position:absolute; left:20px; top:40px; width:494px; height:15px; z-index: 100; visibility: visible;">
<div style="height:20px;z-index:2; background-image:url()" onMouseOver="readyInsert()" onMouseOut="failInsert();">把层拖动到这儿</div>
</div>
<div id="div_one" class="div_one" style="position:absolute; left:204px; top:277px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
<div onMouseDown="readyDrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">BBS</div>
<div class="textSheet" style="border:1px solid #996666;">Content</div>
<div class="blankBar" style="height:10px"></div>
</div>
<div id="div_one" class="div_one" style="position:absolute; left:561px; top:195px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
<div onMouseDown="readyDrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">Log</div>
<div class="textSheet" style="border:1px solid #996666;">Content<br>
Content<br>
Content    <br>
Content<br>
</div>
<div class="blankBar" style="height:10px"></div>
</div>
<div id="div_one" class="div_one" style="position:absolute; left:438px; top:74px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
<div onMouseDown="readyDrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">Worker</div>
<div class="textSheet" style="border:1px solid #996666;">Content</div>
<div class="blankBar" style="height:10px"></div>
</div>
<div id="div_one" class="div_one" style="position:absolute; left:206px; top:406px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
<div onMouseDown="readyDrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">Tools</div>
<div class="textSheet" style="border:1px solid #996666;">Content</div>
<div class="blankBar" style="height:10px"></div>
</div>
</body>
</html>
nxmxbbd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
drag_layer.rar_DRAG_LAYER_Drag.js p_layui drag_layui 拖拽_visual c
09-19
js html 实现动态拖拽web页面。
pageX-layerX-clientX-offsetX的区别
qyaroon的博客
04-13 916
PageX和clientX 这个两个比较容易搞混, PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器的可视窗口为参考点,随滑动条移动 而变化. IE中没有PageX，解决办法： PageY=clientY+scrollTop-clientTop; 页面上的位置
Js event对象offsetX, clientX, pageX, screenX, layerX, x区别（图解）
麻瓜哇哇哇的博客
05-09 1443
简介 因为实际开发中，很少用到event对象的这几个值，每当写的时候又记不清，然后就要浪费时间去查找准确的资料，很是不爽，所以就做个记录~话不多说，直接上图（ps:图是网上找的，如果侵权，立马删除）： 针对offsetX, clientX, pageX, screenX，图上已经标的很明白了，就不做讲解了~ event.x event.x代表点击的点距离可视区左边框的距离，而它在不同浏览器处理结果是不一样的，首先看以下代码 <body> <div> 外
LauncherRootView和DragLayer的布局过程
青青的专栏--C/C++ OOA/D Design Pattern
10-08 1261
话说讲解Launcher3的布局过程真是要耗费一番功夫了，因为他的过程很难理解， 一般来说我们普通应用的布局过程其实都是按照系统自带的ViewGroup来的，如果自定义了一些布局方法，开发者在考虑xml标记的布局文件的时候，还要考虑运行时的一些动态变化。 在接着往下读之前，你最好先去了解一下View的绘制流程。 在主布局launcher.xml中， 最外层是LauncherRootVi
改造DragLayer 实现的控件随意拖动, 以及贴边效果
weixin_33711647的博客
06-07 776
2019独角兽企业重金招聘Python工程师标准>>> ...
Android4.4-Launcher源码分析系列之关键的类和接口之DragLayer
Dennis-Android的博客
05-31 3128
一、DragLayer布局 上一篇文章分析过Launcher的布局,它是最外层的布局 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:launcher="http://schemas.android.com/apk/res-auto/com.android.launcher
Path.Drag.js:向传单路径添加拖动功能
04-28
Path.Drag.js 向小叶路径（多边形，折线，矩形，圆形，CircleMarker…）添加拖动功能。 例子 安装 此库需要Leaflet版本1.0或更高版本 在JavaScript文件中包含Path.Drag.js （包括Leaflet本身之后）。 可通过NPM...
The boundary layer on a spherical gas bubble，Moore
05-08
The boundary layer on a spherical gas bubble,Drag force,Moore（1963），气泡阻力的经典文章，可能不好找
Comparison of Viscous Grid Layer Growth Rate
02-11
Comparison of Viscous Grid Layer Growth Rate of Unstructured Grids on CFD Drag Prediction Workshop Results
400个DreamWeaver插件
03-28
mxp/Dreamweaver的drag layer函数在Mozilla M18 -Netscape 6下没有作用，这个插件是一个补丁 mxp/一个很不错的插件！很多朋友一定都想不打开客户端的默认邮件程序来发送email吧，这个插件就是插入一个这样的超连接。...
e.clientX,e.clientY,e.pageX,e.pageY,e.offsetX,e.offsetY,e.screenX,e.screenY
测试0901-1
01-29 1049
e.clientX,e.clientY, e.pageX , e.pageY , e.offsetX , e.offsetY , e.screenX , e.screenY 欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~ 声明：参考文档你是如何理解var e=e||window.event的 刚才写博客《ja...
【Launcher开发】拖拽过程分析(上)
乌啼夜的酒痕
06-15 753
  不知你是否还记得桌面布局分析一文中的launcher.xml布局文件中根布局下嵌套的一个看似没啥用的DragLayer布局，它既不像Workspace那样作为PagedView容器占据大半江山，也不似HotSeat那样别有洞天。如果仅以布局的层面看，它更像是冗余存在。但它作为包裹布局，却实在有深层次的意义，今天我们就一起来揭下其神秘面纱。    我们知道，在安卓桌面长按某个应用图标时可以拖拽进...
页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理...
weixin_30471065的博客
11-25 269
鼠标事件都是在特定位置发生的，我们可以通过event事件对象的各种属性来获得事件发生的坐标位置，有相对于视口的，有相对于整个文档的，同样页面元素的位置也有相对视口的，也有滚动后的，这些都比较容易混淆，所以整理在这里，备忘，待查。 1.客户区坐标位置（clientX/clientY） 我们可以通过event事件对象的clientX/clientY属性获得事件发生时鼠标指针在视口中...
Swing的容器结构与JLayeredPane的使用
kewb_2013的专栏
03-01 3439
Swing的容器结构与JLayeredPane的使用 类层次结构图： java.lang.Object --java.awt.Compontent --java.awt.Container --javax.swing.JComponent --javax.swing.JLayeredPane 我们可把Swing容器的结构看似如下图所示：
Event获取clientX,offsetX,layerX,pageX,screenX
丰的博客
01-09 1469
一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标 二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标 （相对于事件源元素内边框的X,Y坐标。） 五、x、y 和screenX、screenY一样 ...
js事件对象Event，layerX与offsetX的区别
alize的博客
08-20 3441
offsetX： 获取到的是鼠标触发点相对于目标事件元素(被触发DOM)左上角的距离(确切的说是到边框外边界的距离)，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。 layerX： 获取到的是鼠标触发点相对于offsetParent元素左上角的距离(确切的说是到边框外边界的距离)，包括中间所有元素的padding、margin、b...
canvas画图 事件
tom_ke的专栏
05-25 1264
DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行操作。比如有一个元素，可以直接用jquery增加click事件$('#p1').click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用
HTML5触摸事件
好女绪的博客
10-01 1225
取材自： html5手机触屏touch事件介绍 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别 HTML5触摸事件详解 HTML5触摸事件包含： touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调...
Unexpected ACTION_DOWN in drag layer
最新发布
03-29
However, in general terms, an "Unexpected ACTION_DOWN in drag layer" error can occur when there is a problem with the touch event handling of a drag layer in an Android app. One possible cause ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值