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. 【HDOJ】1539 Shredding Company

    DFS. /* 1539 */ #include <iostream> #include <cstdio> #include <cstring> #include ...

  2. COJ 2003 选根 （树的重心）

    我们可以用树形DP在线性复杂度内搞定重心. #include<iostream> #include<cstdio> #include<cmath> #include ...

  3. Application之图书馆

    前两天小编讲的都是些比较隐私的东西,为啥隐私?因为它俩(cookie和session)都只有用户自已才能使用和访问,今天小编来介绍个比较开放点的东西给大家. 小编虽已脱下学生服装多年,但如今忆起当年校 ...

  4. SQL 截图

  5. fstream的用法

    本文转载自 http://www.newxing.com/Tech/Program/Cpp/577.html   C++文件流:fstream // 文件流ifstream  // 输入文件流ofst ...

  6. E - Just a Hook - hdu 1698（区间覆盖）

    某个英雄有这样一个金属长棍,这个金属棍有很多相同长度的短棍组成,大概最多有10w节,现在这个人有一种魔法,他可以把一段区间的金属棍改变成别的物质,例如金银或者铜, 现在他会有一些操作在这个金属棍上,他 ...

  7. Python自动化之Django的CSRF

    什么CSRF? CSRF, Cross Site Request Forgery, 跨站点伪造请求.举例来讲,某个恶意的网站上有一个指向你的网站的链接,如果 某个用户已经登录到你的网站上了,那么当这个 ...

  8. Web 前端 —— javaScript

    目录: 资源链接 基础知识 基础问题集 资源链接: http://www.w3school.com.cn/ 弹出窗口,变暗特效:http://www.csrcode.cn/article-584-1. ...

  9. 推荐一款不错的dialog小工具：artDialog

    推荐一款不错的dialog小工具, 地址:http://www.planeart.cn/demo/artDialog/_doc/labs.html 相关介绍例如以下: artDialog是一个基于ja ...

  10. MySQL主从复制与lvs+keepalived单点写入读负载均衡高可用实验【转】

    一.环境Master(主机A):192.168.1.1Slave(主机B) :192.168.1.2  W-VIP(写入)  :192.168.1.3 R-VIP(读取)  :192.168.1.4  ...