【j2ee】div浮动层拖拽
背景：近期项目中需要实现弹出浮层增加数据，并且浮动层可以拖拽
解决步骤：1、浮动层实现 2、拖拽实现
多方查资料，基本实现功能，现做demo，便于以后使用
先上图片大体展示实现效果：
再上代码，展示我的实现思路：
DragAndDrop.html
<!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=UTF-8">
<title>浮动层拖拽</title>
<script src="DragDiv.js" type="text/javascript" language="javascript"
charset="UTF-8"></script>
<link href="UploadFile.css" rel="stylesheet" type="text/css" /> <script type="text/javascript">
function openFuCeng() {
document.getElementById("moveFile").style.display = "block";
document.getElementById("shadow2").style.display = "block"; }
function closeDiv() {
document.getElementById("moveFile").style.display = "none";
document.getElementById("shadow2").style.display = "none"; }
</script>
</head>
<body>
<div id="dragAndDrop">
<!-- 浮层开始 -->
<div id="moveFile" class="moveFile">
<div class="toolbarHeight" onmousedown="down('moveFile')">
<label>鼠标拖拽可移动</label>
</div>
<div style="width:100%;height:85px; ">
<p>浮动层</p>
</div>
<div class="fucengDiv" >
<input class="toobarBtn" type="button" value="关闭" onclick="javascript:closeDiv()"/>
</div>
</div>
<div id="shadow2"></div>
<!-- 浮层结束 -->
<div></div>
<input type="button" value="点击展示浮层" onclick="javascript:openFuCeng()" style="margin-top: 20px;">
<p>底层页面</p>
</div>
</body>
</html>
DragDiv.js
/**
* 浮层拖拽
*/
var px = 0;
var py = 0;
var begin = false;
//是否要开启透明效果
var enableOpacity = false; // 默认不允许
var myDragDiv;
/**
* 浮层拖拽
* @param divid 待拖拽对象id
*/
function down(divid) {
myDragDiv=document.getElementById(divid);//获得被拖拽对象
begin = true;
myDragDiv.style.cursor = "hand";
event.srcElement.setCapture();
px = myDragDiv.style.pixelLeft - event.x;//pixelLeft
py = myDragDiv.style.pixelTop - event.y;
} document.onmousemove=function() {
if (myDragDiv != null && typeof (myDragDiv) != "undefined") {
if (begin&&(px + event.x)>10) {
if (enableOpacity) { myDragDiv.style.filter = "Alpha(opacity=30)"; } // 滤镜
myDragDiv.style.pixelLeft = px + event.x;
myDragDiv.style.pixelTop = py + event.y;
}
}
} document.onmouseup=function() {
if (myDragDiv != null && typeof (myDragDiv) != "undefined") {
begin = false;
if (enableOpacity) { myDragDiv.style.filter = "Alpha(opacity=100)"; } // 滤镜
myDragDiv.style.cursor = "default";
event.srcElement.releaseCapture();
myDragDiv = null;
}
}
UploadFile.css
@CHARSET "UTF-8";
#dragAndDrop{
margin: 0 auto;
width: 300px;
height: 200px;
margin-top:200px;
text-align:center;
background:#98fb98 ;
border: 2px solid black;
}
/*文件整体大小*/
#shadow2{
display: none;
background:white;
opacity:0.2;
filter:alpha(opacity=20);
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:996;/*z-index position display 共同实现层的浮动 */
margin: 0 auto;
}
/*移动浮层*/
.moveFile{
display: none;
width: 150px;
height: 160px;
position: absolute;
z-index:997;
border: 2px solid black;
background:#FFF;
top:50%;
margin-top:-50px;
left:50%;
margin-left:-50px;
}
.toolbarHeight{
height: 25px;
width: 100%;
border-bottom:#b7e3f2 1px solid;
background:#98fb98 ;
}
.toobarBtn{
float: right;
margin-right: 10px;
} .fucengDiv{
width:100%;
height: 30px;
padding-top: 5px;
border-top:#b7e3f2 1px solid;
}
注：拖拽的实现是在网上查资料找到的，做了一些小的改动，大意了忘记留下学习地址了
以上使用到的代码，看着还是比较简单的，但是你理解吗？至少我还是有问题的
问题：
首次拖拽总是不灵活，需要多晃动几次鼠标才有效，为什么呢？待解决
【j2ee】div浮动层拖拽的更多相关文章
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 学习笔记3 点击弹出一个div并允许拖拽移动
这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章,感谢他的分享. 首先我们有一个a标签和一个div,div默认是不显示的,当用户点击时改为显示 ...
- 用JavaScript实现div的鼠标拖拽效果
实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...
- div与div之间的拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 使div弹窗可拖拽指令
在项目开发过程中,有些情况dialog弹窗,直接使用div模拟弹窗效果,并需要支持div可拖拽. div模拟弹窗效果: (1)在用于存放指令的文件夹内,新建js文件,命名为:drag.js.具体代码如 ...
- div/dom元素拖拽缩放插件，纯js实现拖拽缩放，不依赖jQuery~
产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...
- DIV 实现可拖拽 功能（留档）
//可拖拽 功能 $.fn.extend({ //用法:$(element).jqDrag(); //element需要具备定位属性,需要手动调整层叠样式,这里只是修改鼠标拖动效果 ...
- DIV浮动层被OCX控件遮蔽解决方案
在开发中需要在网页中嵌入OCX控件,但是控件嵌入后,总是会出现在网页最顶层,页面中的浮动DIV总是不能正常显示,会被遮蔽掉,那么这里就需要特殊处理一下: OBJECT会遮蔽掉页面内容,但是IFRAME ...
- jquery弹出层拖拽
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met ...
随机推荐
- JDK和JRE的差异和区别
来源:http://docs.oracle.com/javase/7/docs/
- geoserver图层属性查询及查询结果转换为arcgis js api能使用的格式
一个项目使用了ArcGIS JS API开发GIS展示层,但GIS服务使用了Geoserver,这时加载Geoserver数据和查询数据就和之前完全不一样了,以下介绍下我使用ArcGIS JS API ...
- django 基础入门（一）
1. django 基本命令 新建project django-admin.py startproject project-name 新建app python manage.py startapp a ...
- WebRTC Demo - getUserMedia()
WebRTC介绍 WebRTC提供三类API: MediaStream,即getUserMedia RTCPeerConnection RTCDataChannel getUserMedia已经由Ch ...
- Shell中的正则表达式及字符串处理
shell里一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式.该模式描述在查找文字主体时待匹配的一个或多个字符串.正则表达式作为一个模板,将某个字符模式与所 ...
- cocos2d-x游戏开发系列教程-超级玛丽07-CMGameMap(四)-马里奥平移
上一篇博文提到,程序如何获取键盘输入,也就是D键按下,程序获取到前进指令,那么获取到前进指令之后,马里奥是如何前进的呢,这篇文章我们重点讨论这个问题. 马里奥的移动,依旧是在帧刷新函数中,这个调用过程 ...
- Internet Explorer 11（IE11）无法切换第三方输入法
Windows 8.1搭载了新的IE11版本,还发布了IE11 for Windows 7. IE11除了支持全尺寸Win设备以外,还比IE10更快速流畅,支持3D等高性能的浏览体验.全新F12开发者 ...
- [Android] 文件夹下文件的个数限制
Android机子的文件夹下有存放文件的个数限制,做了下测试,如下: 在创建第65534个文件时抛出了异常: java.io.IOException: open failed: ENOSPC (No ...
- Linux 多线程通信
摘自资料(linux 与Windows不同) 线程间无需特别的手段进行通信,由于线程间能够共享数据结构,也就是一个全局变量能够被两个线程同一时候使用.只是要注意的是线程间须要做好同步,一般用mutex ...
- Ext JS学习第五天 我们所熟悉的javascript（四）
此文用来记录学习笔记: •javascript之对象.面向对象 •可能对于高级语言你可能了解甚至精通OOP面向对象,那么对于javascript你又熟悉多少呢?我们一起来学习javascript面向对 ...