用js实现的一个可拖动标签的例子
先贴代码:
<!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实现的一个可拖动标签的例子的更多相关文章
- JS 实现 ResizeBar,可拖动改变两个区域(带iframe)大小
将网页化成两个区域,左边区域是一个树结构,右边区域是一个iframe,点击左边区域时,右边区域加载页面.实现功能:在两个区域间加一个可拖动条,拖动时改变左右两个区域的大小.在Google上搜索slid ...
- 原生js怎么为动态生成的标签添加各种事件
这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...
- Headless Chrome:服务端渲染JS站点的一个方案【上篇】【翻译】
原文链接:https://developers.google.com/web/tools/puppeteer/articles/ssr 注:由于英文水平有限,没有逐字翻译,可以选择直接阅读原文 tip ...
- 用原生js来写一个swiper滑块插件
是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...
- php+js实现极验滑块拖动验证码-tncode
先上图: 演示地址:http://aso.39gs.com/tncode/index.html 相信在淘宝,斗鱼这些大网站都见到过这样的验证码了,拖动验证码比传统在移动端有更好的化验,减少用户的输入. ...
- 让一个div拖动和让一个panel拖动加拉大拉小
一.让一个div拖动 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...
- js实现元素范围内拖动
元素拖拽,网上一堆的实现,其中很多是原生js写的,都不够简洁,甚至运行后看不到效果. 于是乎,安静地想了下,拖动元素貌似就是一个滑动事件的监听处理,具体操作如下: 1.一个外层DIV,或者直接用根节点 ...
- js获取上一个月、下一个月格式为yyyy-mm-dd的日期
/** * 获取上一个月 * * @date 格式为yyyy-mm-dd的日期,如:2014-01-25 */ function getPreMonth(date) { var arr = date. ...
- js会员头像上传拖动处理头像类
js会员头像上传拖动处理头像类 点击下载源码文件
随机推荐
- ImportError: No module named _curses;Color support is disabled, python-curses is not installed.解决办法
linux系统默认安装了python2.6, 但是发现python2.7 import curses时 提示 找不到_curses 错误. 用pip(python2.7 )安装了curses-204 ...
- BUPT复试专题—C翻转(2010)
https://www.nowcoder.com/practice/74bdb725421c4f80b4aca7266818baf0?tpId=67&tqId=29639&rp=0&a ...
- 安卓自带下拉刷新SwipeRefreshLayout加入上拉刷新功能
在项目里面要用到刷新库.曾经都是使用第三方的.只是看到官方出了 SwipeRefreshLayout之后就用SwipeRefreshLayout.可是不知道什么原因官方SwipeRefreshL ...
- 写2个线程,其中一个线程打印1~52,另一个线程打印A~z,打印顺序应该是12A34B45C……5152Z
我写的 class LN { private int flag = 0; public static char ch = 'A'; public static int n = 1; public sy ...
- FastDFS的配置、部署与API使用解读(2)以字节方式上传文件的客户端代码(转)
本文来自 诗商·柳惊鸿 Poechant CSDN博客,转载请注明源地址:FastDFS的配置.部署与API使用解读(2)上传文件到FastDFS分布式文件系统的客户端代码 在阅读本文之前,请您先通过 ...
- 怎样更改Linux中默认的openjdk为自己安装的JDK
(1)/etc/profileexport JAVA_HOME=/usr/java/jdk1.7.0_67-cloudera/export PATH=$PATH:$JAVA_HOME/binexpor ...
- oracle的shared、dedicated模式解析
主要參考文档:http://www.itpub.net/thread-1714191-1-1.html Oracleh有两种server模式shared mode和dedicated mode. De ...
- Cookie 和 Session 的区别 与联系
一. 概念理解 你可能有留意到当你浏览网页时,会有一些推送消息,大多数是你最近留意过的同类东西,比如你想买桌子,上淘宝搜了一下,结果连着几天会有各种各样的桌子的链接.这是因为 你浏览某个网页的时候,W ...
- CentOS笔记-vim
详细的参考http://www.runoob.com/linux/linux-vim.html i插入 I 行首插入 A 行尾插入 fn + ←,行首 fn + →,行尾 fn + ↑,向上翻页 fn ...
- TypeError: 'module' object is not callable 原因分析
程序代码 class Person: #constructor def __init__(self,name,sex): self.Name = name self.Sex = sex def ToS ...