背景：近期项目中需要实现弹出浮层增加数据，并且浮动层可以拖拽

解决步骤：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浮动层拖拽的更多相关文章

  1. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery 学习笔记3 点击弹出一个div并允许拖拽移动

    这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章,感谢他的分享. 首先我们有一个a标签和一个div,div默认是不显示的,当用户点击时改为显示 ...

  3. 用JavaScript实现div的鼠标拖拽效果

    实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...

  4. div与div之间的拖拽

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. 使div弹窗可拖拽指令

    在项目开发过程中,有些情况dialog弹窗,直接使用div模拟弹窗效果,并需要支持div可拖拽. div模拟弹窗效果: (1)在用于存放指令的文件夹内,新建js文件,命名为:drag.js.具体代码如 ...

  6. div/dom元素拖拽缩放插件，纯js实现拖拽缩放，不依赖jQuery~

    产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...

  7. DIV 实现可拖拽 功能（留档）

    //可拖拽 功能 $.fn.extend({    //用法:$(element).jqDrag();    //element需要具备定位属性,需要手动调整层叠样式,这里只是修改鼠标拖动效果    ...

  8. DIV浮动层被OCX控件遮蔽解决方案

    在开发中需要在网页中嵌入OCX控件,但是控件嵌入后,总是会出现在网页最顶层,页面中的浮动DIV总是不能正常显示,会被遮蔽掉,那么这里就需要特殊处理一下: OBJECT会遮蔽掉页面内容,但是IFRAME ...

  9. jquery弹出层拖拽

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met ...

随机推荐

  1. [C#]窗体切换--避免开启多个线程

    先说说这个多窗体的界面的解决的办法: 用到的方法很简单,就是程序运行就建立一个MainForm,在这个MainForm中设立一个Panel,同时设立几个按钮,按下每个按钮都在这个Panel中载入不同的 ...

  2. MySQL 5.6.x 配置数据库主从复制

    [转]http://blog.csdn.net/lwprain/article/details/10966837 备注: 在配置之前如果之前配置过主从没成功的话, 最好把master数据库目录下的my ...

  3. 织梦dedecms|文章模型内容页标签

    文章标题:{dede:field.title/}文章链接:{dede:field name='arcurl'/}发布时间:{dede:field.pubdate function="MyDa ...

  4. day1作业脚本

    1.编写登录接口: - 输入用户名和密码 - 认证成功后显示欢迎信息 - 输错三次后锁定 2.编写多级菜单 - 三级菜单 - 可依次进入子菜单 第一次写python脚本,因为没有学到函数,所以写的有点 ...

  5. 操作数组的工具类Arrays

    Java提供的Arrays类里包含一些static修饰的方法可以直接操作数组. int binarySearch(type[] a, type key)使用二分法查询key元素值在a数组中出现的索引, ...

  6. 1 初级.net web工程师，在工作中都做些什么

    初级.Net Web工程师,在工作中都做些神马?   职责 初级.Net Web工程师的主要职责,就是按比较详细的要求去完成代码. 比较详细的要求是指:一般会把页面式样.功能的描述.数据库结构.性能要 ...

  7. Hdu 1301 Jungle Roads （最小生成树）

    地址:http://acm.hdu.edu.cn/showproblem.php?pid=1301 很明显,这是一道“赤裸裸”的最小生成树的问题: 我这里采用了Kruskal算法,当然用Prim算法也 ...

  8. poj 1979 Red and Black(dfs)

    题目链接:http://poj.org/problem?id=1979 思路分析:使用DFS解决,与迷宫问题相似:迷宫由于搜索方向只往左或右一个方向,往上或下一个方向,不会出现重复搜索: 在该问题中往 ...

  9. [Django实战] 第9篇 - 表单、视图、模型、模板的交互

    本章通过实现一个用户提交任务请求的页面,讲述表单.视图.模型.模板间的交互. 首先,我们需要定义一个表单(forms.py) class CreatetaskForm(forms.Form): cre ...

  10. 浅谈长尾理论--《Makers》读后感

    近期有幸读了一本好书<Makers>,作者是克里斯·安德森.作为3D Robotics和DIY Drones的联合创始人,自然对于正步入的“第三次工业革命”有较为深刻的体会.清晰的逻辑中, ...