<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. redis 常用配置

    参数说明 redis.conf 配置项说明如下: 1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 2. 当Redis以守护进程方式 ...

  2. 【Java】集合_学习笔记

    一.集合 1.集合类也称容器类,主要负责保存.盛装其他数据. 2.集合可以保存数量不确定的数据,保存具有映射关系的数据(也称关联数组). 3.Java5后提供一些多线程安全的集合类,放在java.ut ...

  3. js加密解密

    <script> document.write("<xmp>"); document.write(function(p,a,c,k,e,r){}(''.sp ...

  4. 从github获取代码

    以duilib为例: 1 建立一个文件夹,右键 git bash here. 2 git init 3 git clone https://github.com/duilib/duilib.git

  5. shiro重新赋值权限

    /** * 重新赋值权限(在比如:给一个角色临时添加一个权限,需要调用此方法刷新权限,否则还是没有刚赋值的权限) * @param myRealm 自定义的realm * @param usernam ...

  6. JAVA开发错误总结(仅记录遇到的错误---后续不断更新......)

    =======华丽分割线(工具总结)===================== 1:Maven项目中junit测试找不到主类的问题 Class not found com.test.utils.tes ...

  7. jq获取屏幕高度和宽度（盒子模型）

    $(window).width(); //浏览器可视窗口宽度 $(window).height(); //浏览器可视窗口高度 $(document).width();//body的宽度 $(docum ...

  8. iptables 端口转发

    sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-ports 8080

  9. MySQL问题记录--Can't connect to MySQL server on localhost (10061)解决方法

    本文mysql的安装环境为win7 64位,mysql版本为MySQL5.7 问题描述:在命令行输入 mysql -u root -p 登录mysql,返回"Can't connect to ...

  10. Linux中修改环境变量导致大量命令不可用的解决办法

    如果搞死环境变量别慌张.因为ls等命令都不能使用了,所以先找到/usr/bin/目录 使用./sudo su命令获取root权限 然后在进入/etc目录 利用vim profile命令 修改profi ...