Ajax的到来让B/S中的客户端中开发有火了一把，网上出现了很多优秀的开源框架和UI，比较著名了有prototype，YUI，GWT等，但很多时候发现这些东西很难用到你的系统之中，有时候你的系统仅仅需要实现一两个UI功能，如果把整个架构都引入进来是不现实的。所以很多时候是需要自己动手去做一些工作。
 
现在弹出窗口在B/S系统中很受青睐，它有美观性和易用性等诸多特点，比如我用的sina 博客登陆窗口就是应用了弹出窗口。以前我们做弹出窗口只用一个window.open()搞定，但后来发现这种窗口有很多弊端，首先是界面的美观性差，其次是与主页面的交互性差（只有一个window.opener引用主页面）。所以在开发过程中要自己动手做一些这方面的事情。
于是很多人选择了用Div来实现但出窗口功能，用css来控制外观。但是，这对开发人员提出更高要求：窗口的定位、拖动、与主页面的交互等。。。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<style type="text/css">

.winFrame{

 position:absolute;

 border: outset gray 1px;

 height:400;

 width:500;

}

.winTitle{

 position:absolute;

 border-bottom:1px solid black;

 width:100%;

 height:20px;

 cursor:move;

}

.winContent{

 position:absolute;

 top:30px;

 width:100%

 padding: 10px;

 overflow: auto;

}

</style>

<SCRIPT LANGUAGE="JavaScript">

  function beginDrag(elem,event){

 var deltaX = event.clientX - parseInt(elem.style.left);

 var deltaY = event.clientY - parseInt(elem.style.top);

 document.attachEvent("onmousemove",moveHandler);

 document.attachEvent("onmouseup",upHandler);

 event.cancelBubble = true;

 event.returnValue = false;

 function moveHandler(e){

   if(!e)

       e = window.event;

   elem.style.left = (e.clientX - deltaX) + "px";

   elem.style.top = (e.clientY - deltaY) + "px";

   e.cancelBubble = true;

 }

 function upHandler(e){

  if(!e)

        e = window.event;

     document.detachEvent("onmousemove",moveHandler);

     document.detachEvent("onmouseup",upHandler);

        e.cancelBubble = true;

 }

  }

</SCRIPT>

</HEAD>

   <div class="winFrame" style="left:50px;top:50px;">

       <div class="winTitle" onmousedown="beginDrag(this.parentNode,event);"> 标题 </div>

    <div class="winContent">

      内容

       </div>

   </div>

<BODY>

</BODY>

</HTML>
 
 

实现DIV拖动的更多相关文章

  1. js实现一个可以兼容PC端和移动端的div拖动效果

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...

  2. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

  3. 让一个div拖动和让一个panel拖动加拉大拉小

    一.让一个div拖动 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...

  4. jquery实现很简单的DIV拖动

    今天用jquery实现了一个很简单的拖动...实现思路很简单  如下: 在thickbox 弹出层内实现拖拽DIV,那么得进行一下相对宽高的运算:必须加上相对于可见窗口宽高和弹出层宽高之间的差:    ...

  5. jQuery实现DIV拖动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法

    故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动,  单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...

  7. div拖动实现及优化

    工作中的一个项目ui界面比较传统(chou),就想着把前端重构一下.内容之一是把导航栏从上方固定高度改为了右侧伸缩的边栏,好处是边栏可伸缩,占用面积小.不完美的地方是有时候会遮挡页面上最右边的按钮,作 ...

  8. 手机版 div拖动

    <!doctype html> <html> <head> <title></title> <script type="te ...

  9. 自定义div 拖动。键盘上下左右键移动，ctrl+Q控制是否可以移动，ctrl+回车，返回初始状态

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. 转：嵌入式linux启动时运行的inittab文件

    嵌入式系统下的linux启动配置文件,不同与普通的PC linux启动配置,启动相关文件与文件的内容也要少得多.嵌入式系统下的linux启动过程一般是:     1 在bootloader中制定各种要 ...

  2. select m objects from n objects randomly

    Q: how to select m objects randomly from n objects with euqal possibility? A: allocate an array of m ...

  3. 【java】基于Tomcat的WebSocket转帖 + 自己理解

    网址:http://redstarofsleep.iteye.com/blog/1488639 原帖时间是2012-5-8,自己书写时间是2013年6月21日10:39:06 Java代码 packa ...

  4. android host

    74.125.20.31 market.android.com 74.125.20.31 developer.android.com 74.125.20.31 android.googlesource ...

  5. Web应用指纹识别

    http://danqingdani.blog.163.com/blog/static/186094195201493121834603/

  6. java数据安全（一）

    在java开发中,常常需要考虑数据安全问题,然不仅仅需要考虑数据存储的安全,还需要考虑数据的传输安全.自从有了数据安全问题后,密码学也就出来了.了解数据安全,首先需要了解密码学 1.什么是密码学 密码 ...

  7. 如何创建WIN服务

    sc create ServiceName binPath= "XXXX.exe" displayName= "中文xxxx"binpath和displayna ...

  8. code testing

    #include<iostream> #include<climits> int main(){ using namespace std; int n_int = INT_MA ...

  9. 16个不错的git别名

    git 是一个非常棒的源代码管理工具,它的使用已经完全整合到开发的工作流当中:同时,git 还是一个 review/OTAP/deployment 工具. 当在 CLI 中使用 git 时,有时必须输 ...

  10. 菜鸟学习 - Unity中的热更新 - LuaInterface用户指南

    [由于学习,所以翻译!] 1.介绍 LuaInterface 是 Lua 语言和 Microsoft.NET 平台公共语言运行时 (CLR) 之间的集成库. 非常多语言已经有面向 CLR 编译器和 C ...