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. bing---iis how to process http request

    http://msdn.microsoft.com/en-us/library/ms524901(v=vs.90).aspx http://msdn.microsoft.com/en-us/magaz ...

  2. Jzzhu and Chocolate

    CF#257 div2 C:http://codeforces.com/contest/450/problem/C 题意:n*m的方格,每次可以横着或者纵向的切一刀,问切k之后,最小的最大是多少. 题 ...

  3. Android ContentProvider 简介

    当在系统中部署一个又一个Android应用之后,系统里将会包含多个Android应用,有时候就需要在小同的应用之问芡亭数据,比如现在有一个短信接收应用,用户想把接收到的陌生短信的发信人添加到联系人管理 ...

  4. VC的UNICODE 编程

    简介 如果你编写的程序是针对非英语国家的用户,如中国.日本.东欧和中东地区,那么你一定要熟悉 UNICODE 字符集.尤其是用 Visual C++/MFC 编写针对上述国家和地区的用户的程序时,如果 ...

  5. Oracle 用户权限管理

    SQL> select * from ROLE_SYS_PRIVS where ROLE='RESOURCE'; ROLE PRIVILEGE ADM --------------------- ...

  6. 【HDOJ】2492 Ping pong

    线段树+离散化. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 2000 ...

  7. vimrc 配置支持backspace

    在vimrc中添加: set nocompatible set backspace=indent,eol,start

  8. C#.net实现密码加密算法

    //SHA-1算法string password = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFil ...

  9. Linux搭建SVN 服务器（转）

    转自:http://my.oschina.net/lionel45/blog/298305 Linux搭建SVN 服务器 作者: 沈小然    日期:2014年 8月 5日 1          安装 ...

  10. MyEclipse使用问题及解决方法

    1.MyEclipse报错:Eclipse javax.servlet.jsp.PageContext cannot be resolved to a type 原因是:jdk 里不包括servlet ...