先贴代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>ÍÏק</title>

<style>

html,body{height:100%;overflow:hidden;}

body,div,h2{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

.win{position:absolute;top:40%;left:33%;width:400px;height:33px;background:#fc0;cursor:move;}

#win1{position:absolute;top:59%;left:59%;width:400px;height:33px;background:#fc0;cursor:move;}

</style>

<script>

window.onload = function ()

{

    var divs = document.getElementsByTagName('div');

    for(var i = 0, len = divs.length; i < len; i++){

        var oWin = divs[i];

        this.doYourSelf(oWin);

    }

};

function doYourSelf(oWin){

        // var oWin = document.getElementById("win");

         var bDrag = false;

         var disX = disY = 0;

         oWin.onmousedown = function (event){

              bDrag = true;

              disX = event.clientX - oWin.offsetLeft;

              disY = event.clientY - oWin.offsetTop;

              return false

         };

         oWin.onmousemove = function (event){

              if (!bDrag)

               return;

              var iL = event.clientX - disX;

              var iT = event.clientY - disY;

              //°Ñͼ²ã·¶Î§¶¨ÔÚä¯ÀÀÆ÷´°¿ÚÄÚ

              var maxL = document.documentElement.clientWidth - oWin.offsetWidth;

              var maxT = document.documentElement.clientHeight - oWin.offsetHeight;

              iL = iL < 0 ? 0 : iL;

              iL = iL > maxL ? maxL : iL;

              iT = iT < 0 ? 0 : iT;

              iT = iT > maxT ? maxT : iT;

              oWin.style.marginTop = oWin.style.marginLeft = 0;

              oWin.style.left = iL + "px";

              oWin.style.top = iT + "px";

              return false

         };

         oWin.onmouseup = function (){

              bDrag = false;

        };

    }

</script>

</head>

<body>

<div class="win">0</div>

<div class="win">1</div>

<div class="win">2</div>

<div class="win">3</div>

<div class="win">4</div>

<div class="win">5</div>

</body>

</html>

再上效果：

That is all !!!

用js实现的一个可拖动标签的例子的更多相关文章

  1. JS 实现 ResizeBar，可拖动改变两个区域(带iframe)大小

    将网页化成两个区域,左边区域是一个树结构,右边区域是一个iframe,点击左边区域时,右边区域加载页面.实现功能:在两个区域间加一个可拖动条,拖动时改变左右两个区域的大小.在Google上搜索slid ...

  2. 原生js怎么为动态生成的标签添加各种事件

    这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...

  3. Headless Chrome：服务端渲染JS站点的一个方案【上篇】【翻译】

    原文链接:https://developers.google.com/web/tools/puppeteer/articles/ssr 注:由于英文水平有限,没有逐字翻译,可以选择直接阅读原文 tip ...

  4. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  5. php+js实现极验滑块拖动验证码-tncode

    先上图: 演示地址:http://aso.39gs.com/tncode/index.html 相信在淘宝,斗鱼这些大网站都见到过这样的验证码了,拖动验证码比传统在移动端有更好的化验,减少用户的输入. ...

  6. 让一个div拖动和让一个panel拖动加拉大拉小

    一.让一个div拖动 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...

  7. js实现元素范围内拖动

    元素拖拽,网上一堆的实现,其中很多是原生js写的,都不够简洁,甚至运行后看不到效果. 于是乎,安静地想了下,拖动元素貌似就是一个滑动事件的监听处理,具体操作如下: 1.一个外层DIV,或者直接用根节点 ...

  8. js获取上一个月、下一个月格式为yyyy-mm-dd的日期

    /** * 获取上一个月 * * @date 格式为yyyy-mm-dd的日期,如:2014-01-25 */ function getPreMonth(date) { var arr = date. ...

  9. js会员头像上传拖动处理头像类

    js会员头像上传拖动处理头像类 点击下载源码文件

随机推荐

  1. Linux下使用vi新建文件保存文件时遇到错误：E212: Can't open file for writing

    出现E212: Can't open file for writing的问题是由于权限问题导致的,解决方法有以下思路: 1.使用root进行登录,然后再操作. 2.在使用命令时,前面加sudo. 3. ...

  2. Javascript构造函数和原型

    相信你已经知道了,Javascript函数也可以作为对象构造器.比如,为了模拟面向对象编程中的Class,可以用如下的代码 function Person(name){ this.name = nam ...

  3. 【mac】mac上使用brew 安装速度慢/每次使用brew 都会卡在updating homebrew不动/更换homebrew的镜像源

    有没有出现一下这样的情况: 如果有,请继续往下走 1.打开mac的命令窗口,键入如下命令 cd /usr/local/Homebrew 2.更换homebrew的默认源[更换为中科大的镜像源] git ...

  4. 【postman】安装使用说明

    1.下载 下载地址:https://pan.baidu.com/s/1miyYjig?errno=0&errmsg=Auth%20Login%20Sucess&&bduss=& ...

  5. python学习笔记——递归算法

    阶乘 #递归计算阶乘 def factorial(n): if n == 1: return 1 return n*factorial(n-1) result = factorial(6) print ...

  6. 【Todo】ES6学习

    今天部分分享,有一篇PPT,放在这里了 /Users/baidu/Documents/Data/Work/分享资料/ES6大法好.pptx 内容挺丰富的,可以学习.

  7. CF 558B(Amr and The Large Array-计数)

    B. Amr and The Large Array time limit per test 1 second memory limit per test 256 megabytes input st ...

  8. mac上的xampp出现Access forbidden! You don’t have permission to access the requested object. It is either

    一个Joomla!程序,之前是在win上的xampp上运行得非常好的,当我把它拿到mac下面的xampp上去运行的时候,发现有问题,没法运行,报以下的错误: Access forbidden!  Yo ...

  9. C++写动态站点之HelloWorld!

    演示样例源码下载地址:Fetch_Platform.7z 更复杂的代码可參考本博客BBS的实现 简单的说.动态站点就是能够动态变更的站点.动态变化的内容通常来自后端数据库.例如以下省略万字(动态站点) ...

  10. 【日常学习】【二叉树遍历】Uva548 - Tree题解

    这道题目本身不难,给出后序遍历和中序遍历,求到节点最小路径的叶子,同样长度就输出权值小的叶子. Uva上不去了,没法測.基本上是依照ruka的代码来的.直接上代码 //Uva548 Tree #inc ...