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. 理解 Javascript 的闭包

    什么是闭包 闭包是什么?闭包是Closure,这是静态语言所不具有的一个新特性.但是闭包也不是什么复杂到不可理解的东西,简而言之,闭包就是: 闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会 ...

  2. optimize the performance

    http://en.wikipedia.org/wiki/Web_Performance_Optimization http://www.stevesouders.com/blog/2011/08/2 ...

  3. u8818 G300的官方rom刷机包及详细的刷机方法

    之前看到有些机友在找华为u8818的官方rom固件包,在这里我给大家分享一下这个手机的官方原版的固件rom包吧,有2.3的,也有4.0的,大家可以根据自己的需求来下载. 华为U8818官方2.3固件: ...

  4. 如何让Qt 的程序等待一段时间（等待的同时，还让主界面刷新图片）good

    后面这种方法可以不影响其他线程的响应,又可以达到等待的目的. 测试的一个小例子: class Widget : public QWidget { Q_OBJECT public: Widget(QWi ...

  5. EntityFramework 插件之EntityFramework.Extended (批量处理)

    接手了一个用EF来做的项目,由于项目中使用的原生处理,导致很多update都是采用先select 后 update的方式来实现,同时无法批量执行逻辑如:根据订单类型统一更新状态等.所以在经过了N多查找 ...

  6. 聚类算法:K均值、凝聚层次聚类和DBSCAN

    聚类分析就仅根据在数据中发现的描述对象及其关系的信息,将数据对象分组(簇).其目标是,组内的对象相互之间是相似的,而不同组中的对象是不同的.组内相似性越大,组间差别越大,聚类就越好. 先介绍下聚类的不 ...

  7. EditText输入长度动态控制，最大长度为16位，小数点后面最大为2位，输入整数只能为13位

    首先在xml 中把inputType设置为numberDecimal (包含小数点)然后在把maxLeng设置为16 package com.example.numbertest; import an ...

  8. linux chgrp命令【转载】

    在lunix系统里,文件或目录的权限的掌控以拥有者及所诉群组来管理.可以使用chgrp指令取变更文件与目录所属群组,这种方式采用群组名称或群组识别码都可以.Chgrp命令就是change group的 ...

  9. I - Strategic Game - hdu 1054(最小点覆盖)

    题意:用最小的点来覆盖全部的边,因为二分图里面最大的匹配就是最小覆盖,所以直接匹配一下即可 ****************************************************** ...

  10. 比较了一下基于PhoneGAP/JQ Mobile 等基于HTML5的Phone 开发框架

    比较了一下基于PhoneGAP/JQ Mobile 等基于HTML5的Phone 开发框架,如果做APP客户端的化,想达到Native UI的效果,都是胡扯的,根本不可能. PhoneGAP 如果想达 ...