<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之socket

    一.初识socket      socket 是网络连接端点,每个socket都被绑定到一个特定的IP地址和端口.IP地址是一个由4个数组成的序列,这4个数均是范围 0~255中的值(例如,     ...

  2. JQ完成表格单元格顺序的上移下调

    如有指教及疑问,欢迎留言 HTML代码 <table class="exampletable"> <thead> <tr> <th> ...

  3. Mifare系列7-安全性（转）

    文/闫鑫原创转载请注明出处http://blog.csdn.net/yxstars/article/details/38087245 飞利浦的MIFARE卡 由于它的高安全性在市场上得到广泛应用,比如 ...

  4. SQLite一些函数用法

    --格林威治日期时间,比北京时间晚8小时 select datetime('now'); --格林威治日期 select date('now'); --本地时间 select time('now',' ...

  5. Cocos2d-x 核心概念 - 场景（Scene）

    场景(Scene):构成游戏的界面 场景类的几种: 展示类场景 选项类场景 游戏场景 场景类继承自Node类

  6. Ios8代码关闭输入预测问题

    自IOS8出来了输入预测问题后,有些问题也就来了比如textfield中输入邮箱的话,就会有很多空格无法去掉,当时我一直在找有没有提供什么方法可以关闭:后面有这样的一个属性可以解决输入邮箱没有空格问题 ...

  7. Linux环境部署（JDK/Tomcat/MySQL/证书）

    #################### 安装JDK1.7.x ####################下载JDK1.7版本的tar包(http://www.oracle.com/technetwor ...

  8. webform分页

    前端界面: 当前第[<asp:Label ID="Label_nowpage" runat="server" Text="Label" ...

  9. 为什么JAVA的垃圾回收机制无法避免内存泄漏

    一.本文参考:    1.<深入理解java虚拟机 JVM高级特性与最佳实践>    2.http://coderevisited.com/memory-leaks-in-java/   ...

  10. 数据库查询优化-SQL优化

    1.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而进行全表扫描,如:select id from t where num is null可以在num上设置默 ...