<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. Digital Roots

    Background The digital root of a positive integer is found by summing the digits of the integer. If ...

  2. 关于 jquery和js获取宽度时只能取整数，取不到小数点

    最近在改版自已的一个网站的时候,遇到了一个问题. 用jquery的width()函数获取元素宽度的时候,返回得到的是整数,而不是小数. 如下图,谷歌上显示的宽度为1078.89px 而我用控制台输出了 ...

  3. angularJS中的ui-router和ng-grid模块

    关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里https://github. ...

  4. （转）assert 断言式编程

    编写代码时,我们总是会做出一些假设,断言就是用于在代码中捕捉这些假设,可以将断言看作是异常处理的一种高级形式.断言表示为一些布尔表达式,程序员相信在程序中的某个特定点该表达式值为真.可以在任何时候启用 ...

  5. 理解HTTP和HTTPS的区别

    原问转载于https://www.mysubmail.com/chs/blog/view/47 这两天闲来无事,在网上看了一下,发现 HTTP 和 HTTPS 的区别很受关注,多位大牛做了很详细的阐述 ...

  6. [HTML/HTML5]7 使用列表

    7.1  在Web页面中使用有序.无序.定义列表 (1)有序列表 有序列表中的每一个列表项之前,都以一个数字或字母作为编号. <ol> <li>树莓</li> &l ...

  7. JAVA方法03之动手动脑问题解决

    动手动脑1.当JAVA里定义的函数中去掉static后,怎么办?(如下程序,将square()函数的static去掉) public class SquareIntTest { public stat ...

  8. flume介绍与原理(一)

    1 .背景 flume是由cloudera软件公司产出的可分布式日志收集系统,后与2009年被捐赠了apache软件基金会,为hadoop相关组件之一.尤其近几年随着flume的不断被完善以及升级版本 ...

  9. PE文件学习系列三-PE头详解

    合肥程序员群:49313181.    合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入) Q  Q:408365330     E-Mail:egojit@qq.com 最近比较忙 ...

  10. javascript实例备忘

    一,javascript动态显示: 如显示效果上图所示: 如图显示鼠标放在百度谷歌等字样上市动态显示其内容明细:代码如下:<head><title></title> ...