背景：近期项目中需要实现弹出浮层增加数据，并且浮动层可以拖拽
解决步骤：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 体系结构图或三层结构图 J2EE 体系结构图是 Java 企业版（Java Enterprise Edition）的架构设计图，它描述了 J2EE 应用程序的逻辑结构和物理结构。J2EE 体系结构图可以分为三层结构图，即Presentation Layer、...
### J2EE 三层结构详解 #### 一、引言 在现代软件开发领域，Java 2 Platform, Enterprise Edition（J2EE）以其强大的企业级应用支持能力而闻名。本书旨在帮助读者深入理解J2EE的三层架构模型，并通过具体的案例来...
典型的J2EE三层结构，分为表现层、中间层（业务逻辑层）和数据服务层。三层体系将业务规则、数据访问及合法性校验等工作放在中间层处理。客户端不直接与数据库交互，而是通过组件与中间层建立连接，再由中间层与...
ASP仿J2EE持久层是针对ASP开发的一种模拟Java J2EE平台中持久层技术的实现。在J2EE环境中，持久层主要负责数据库的交互，包括数据的存取、对象关系映射（ORM）以及事务管理等。ASP，虽然在功能上不及J2EE强大，但...
【摘要】 在Internet/Intranet技术的深入发展和广泛应用的今天,传统的客户机/服务器计算方式已经不能适应实际应用的需要,而J2EE架构正是适合Internet上的Web计算特点而产生和发展的,与传统的客户机/服务器计算模型...
### J2EE五层Web开发架构相关知识点 #### 一、引言 随着互联网技术的发展，Web应用程序变得越来越复杂，为了更好地管理和组织这些应用程序，Java 2 Platform, Enterprise Edition（J2EE）提出了一种多层架构的设计...
《Struts开发与J2EE N层架构深度解析》 在现代软件开发中，架构设计是确保系统可扩展性、可维护性和性能的关键。本文将深入探讨Struts框架下的J2EE N层架构，理解其核心概念、优势及具体实现方式。 ### 一、N层...
在J2EE的多层架构中，表示层扮演着至关重要的角色，它直接与用户交互，负责呈现数据和接收用户输入。Struts框架是基于J2EE的一个成熟MVC框架，它通过Servlet、JSP技术，以及自定义标签和信息资源的整合，为Java Web...
Web应用程序概论主要探讨的是如何构建可扩展、灵活和易于维护的企业级应用，而J2EE的N层体系结构则是解决这一问题的关键。J2EE，全称为Java 2 Platform, Enterprise Edition，由SUN公司制定，是一个用于开发分布式、...
j2ee三层架构开发
J2EE的mvc三层架构的基本中知识
接下来，我们将深入探讨J2EE和五层架构的相关知识点。 1. **J2EE概述** J2EE是一个由Oracle公司（原Sun Microsystems）主导的开放标准，它包括一系列服务、API和协议，用于简化企业级应用的开发和部署。核心组件...
Sun的Java 2 Enterprise Edition(J2EE)平台已经成为使用最广泛的Web程序设计技术，最近几年，J2EE Web程序的开发已经成为信息系统的关键。
J2EE应用通常分为三层：客户层、中间层（包括WEB层和业务层）以及企业信息系统层。客户层负责与用户交互，展示计算结果；WEB层包含JSP、Java Applets和Servlet，用于动态生成HTML页面并响应客户请求；业务层主要由...
j2ee三层架构,以及详细介绍了它们的优越性，仔细阅读，肯定会给您带来不一样的感受
### 基于J2EE的三层B/S企业信息系统 #### 概述 本文由朱小毅撰写，发表于2005年，主要探讨了如何利用Java 2 Platform, Enterprise Edition（J2EE）来构建三层B/S（浏览器/服务器）架构的企业信息系统。文章首先...
J2EE应用的五层架构模型J2EE应用的五层架构模型J2EE应用的五层架构模型
### 基于MVC的J2EE的三层结构开发技术研究与实现 #### J2EE简介 J2EE（Java 2 Platform, Enterprise Edition），是由Sun Microsystems公司提出的一个全面的技术框架，旨在为企业级应用提供一种高效且统一的开发...