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 1285 确定比赛名次(拓扑排序)

    Problem Description 有N个比赛队(1<=N<=500),编号依次为1,2,3,....,N进行比赛,比赛结束后,裁判委员会要将所有参赛队伍从前往后依次排名,但现在裁判委 ...

  2. 带您理解SQLSERVER是如何执行一个查询的

    原文地址:http://www.cnblogs.com/lyhabc/p/3367274.html 看这篇文章之前,阁下可以先看一下下面的文章 SQLSERVER独特的任务调度算法"SQLO ...

  3. libvirt 命令行交互工具之virsh

    libvirt是当前主流VM最低层库.IBM PowerVM也不例外,libvirt是深入玩虚拟化必须玩转的东西; 简单测试玩玩libvirt 的virsh命令行交互工具, 你我都知libvirt大体 ...

  4. Flume源码-LoggerSink

    package org.apache.flume.sink; import com.google.common.base.Strings; import org.apache.flume.Channe ...

  5. Highcharts下载与使用_数据报表图

    Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web ...

  6. Hbase设计实战

    Hbase设计实战 本文通过一个游戏公司客户实际案例的讲解,分析了 Hbase 表设计及开发在实际案例中的运用,对比了不同的 Hbase 设计考量对客户端访问模式及检索性能的差异.读者通过案例中 Hb ...

  7. Laravel 4 Quick Tip: Custom Error Pages

    App::error(function($exception, $code) { switch ($code) { case 403: return Response::view('errors.40 ...

  8. linux下mysql5.5的安装

    #rpm –qa|grep –i mysql查看已安装的mysql版本 如果有已存在的mysql版本则删除 安装服务端和客户端,去Oracle官网下载: # rpm -ivh MySQL-serve ...

  9. VS2008　动态库和静态库的生成和加载

    第一:动态库和静态库的生成: 1) 新建一个生成dll工程: 文件->新建->项目->Win32->Win32控制台应用程序 输入项目名称:dllTest ,项目路径:D:\V ...

  10. session过期后自动跳转到登陆页

    项目需要做一个自动登出的功能,查询了网上的资料,一开始准备用session监听做,按照下面方式配置监听器 1.在项目的web.xml文件中添加如下代码: <!--添加Session监听器--&g ...