<html>

<head>

<title> Drag Demo 1 </title>

<style type="text/css">

#drag{

    width:100px;

    height:20px;

    background-color:#eee;

    border:1px solid #333;

    position:absolute;

    top:30px;

    left:200px;

    text-align:center;

    cursor:default;

    }

</style>

<script type="text/javascript">

window.onload=function(){

    drag(document.getElementById('drag'));

};  

function drag(o){

    o.onmousedown=function(a){

        var d=document;if(!a)a=window.event;

        var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;

        if(o.setCapture)

            o.setCapture();

        else if(window.captureEvents)

            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);  

        d.onmousemove=function(a){

            if(!a)a=window.event;

            if(!a.pageX)a.pageX=a.clientX;

            if(!a.pageY)a.pageY=a.clientY;

            var tx=a.pageX-x,ty=a.pageY-y;

            o.style.left=tx;

            o.style.top=ty;

        };  

        d.onmouseup=function(){

            if(o.releaseCapture)

                o.releaseCapture();

            else if(window.captureEvents)

                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

            d.onmousemove=null;

            d.onmouseup=null;

        };

    };

}

</script>

</head>  

<body>

<div id="drag">drag me<div>

</body>

</html>

　　

div随意拖动小例子的更多相关文章

  1. div随意拖动，基于jquery。

    $("#box").mousedown(function (e) { //e鼠标事件 var offset = $(this).position();//DIV在页面的位置 使用p ...

  2. Ubuntu 14.10下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具)

    Ubuntu 14.10下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具) 最近因为项目关系,收朋友之托,想制作秀场网站,但是因为之前一直没有涉及到这 ...

  3. CentOS6下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具)

    1.先添加几个RPM下载源 1.1)安装RPMforge的CentOS6源     [root@AY130611215205Z ~]# wget -c http://pkgs.repoforge.or ...

  4. bootstrap 模态 modal 小例子

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  5. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

  6. js小例子（标签页）

    运用js写的一个小例子,实现点击不同的标签出现不同的内容: <!DOCTYPE html> <html> <head> <meta chaset=" ...

  7. Ajax入门小例子

    大牛文章:http://www.cnblogs.com/guduoduo/p/3681296.html                               ---Ajax基础学习 http:/ ...

  8. JS模拟键盘事件 -- 原理及小例子

    提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...

  9. 纯js实现积木（div）拖动效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. python pyqt4 ide eric安装

    注意事项 关于python,pyqt的版本 笔者安装的是eric,原来电脑安装的是64位的python,32位的pyqt4,导致系统找不到pyqt,后来更换python版本为32搞定,猜测pyqt的版 ...

  2. Rdlc报表 数据汇总分组展示

    1.从工具箱拉出表或者矩阵(本次使用的是矩阵) 2.选择需要的数据集,没有就新建一个数据集,名称自己起好,下面有用到 3.将行组和行列显示出来(右击报表--试图=>) 4.双击行组下的RowGr ...

  3. 工具网站gallery

    jQuery各个版本齐全的api 在线编辑器codepen

  4. maven工程使用spring-boot-devtools进行热部署，更改代码避免重启web容器

    spring-boot-devtools 是一个为开发者服务的一个模块,其中最重要的功能就是自动应用代码更改到最新的App上面去.相关Blog: 点击打开链接 原理是在发现代码有更改之后,重新启动应用 ...

  5. springmvc 解决跨域CORS

    import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import ja ...

  6. 嵌入式Linux学习笔记（0）基础命令。——Arvin

    学习记录: 到今天为止ARM裸机开发学习进程:1.2.1-1.2.14 预科班知识Linux介绍学习进程:0.2.1-0.2.6 学习内容笔记: 学习了Linux的开发方式的优劣介绍 学习了常用文件夹 ...

  7. reggetvalue在xp下加载失败

    在windows 32bit的xp下使用reggetvalue会提示,无法定位程序输入点reggetvalueW于动态链接库advapi32.dll(UNICODE).reggetvalueA也是无法 ...

  8. unity自带寻路Navmesh入门教程（三）

    继续介绍NavMesh寻路的功能,接下来阿赵打算讲一下以下两个例子,先看看完成的效果:   第一个例子对于喜欢DOTA的朋友应该很熟悉了,就是不同小队分不同路线进攻的寻路,红绿蓝三个队伍分别根据三条路 ...

  9. .net 导出Excel功能

    将DataSet对象导出成Excel文档 一.不带格式控制 void btnExport_Click(object sender, EventArgs e) { IList<string> ...

  10. Oracle10G无图形安装及升级

    Oracle10.2.0.1静默安装及升级到10.2.0.4 下载及解压好database和Disk1 环境配置: su - oracle vim ~/.bash_profile 保存. vim /d ...