<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. nginx安装方式

    1.首先安装pcre库 获取pcre到一个目录 wget http://ftp.exim.llorien.org/pcre/pcre-8.21.tar.gz 解压缩pcre包 tar -zxvf pc ...

  2. xib的UIScrollView自适应高度

    1.首先,我们先把这个size classes关了(需要使用的童鞋无视掉,也无视掉我的工程名,这是我弄高德地图创建的工程) 2.添加一个scrollview上去,设置上下左右约束为0 3.然后搞一个v ...

  3. FUNCTION

    1,FUNCTION-1 CREATE FUNCTION `vendor_area_child_ids`(rootId INT) ) BEGIN ); ); SET pTemp = '$'; SET ...

  4. 深入理解IOC模式及Unity框架

    研究了下,有几篇博客确实已经说得很清楚了 1.IoC模式:http://www.cnblogs.com/qqlin/archive/2012/10/09/2707075.html  这篇博客是通过一个 ...

  5. 微软图表控件MsChart使用

    assemblies节点下:<add assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, ...

  6. java中观察者模式Observable和Observer

    25.java中观察者模式Observable和Observer 如果想要实现观察者模式,则必须依靠java.util包中提供的Observable类和Observer接口 观察者设计模式 现在很多的 ...

  7. linux下使用多线程编写的聊天室

    自从开始学linux网络编程后就想写个聊天室,一开始原本打算用多进程的方式来写,可是发觉进程间的通信有点麻烦,而且开销也大,后来想用多线程能不能实现呢,于是便去看了一下linux里线程的用法,实际上只 ...

  8. C++编程小知识随手记

    C++编程小知识点: (1)queue和vector类型: 加入元素 : queue是queue.push(),vector是vector.push_back(), 删除元素: queue是queue ...

  9. phantomjs+selenium实现爬取动态网址

    之前使用 selenium + firefox驱动浏览器来实现爬取动态网址,但是firefox经常更新,更新后时常会导致webdriver启动不来,所以改用phantomjs+selenium来改善一 ...

  10. Ajax些成绩批量录入

    1.jsp,ajax的循环调用,必须要递归,否则会出错. <%@ page language="java" import="java.util.*" pa ...