Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox)
-
Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox)
说明:
拖曳流程
鼠标按下->(鼠标移动->元素移动)
鼠标按键弹起->元素停止移动针对 IE, 主要使用 obj.attachEvent() && obj.detachEvent()
针对 Firefox 主要使用 DOM 2 的 obj.addEventListener() && obj.removeEventListener
Opera 以上两种方法都支持在本文中, 需要拖曳的元素必须指定style 属性为 position:absolute;
且应指定 left && top 的坐标值, 如:- linenum
- <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:100px; top: 150px;" οnmοusedοwn="fDragging(this, event, true);">
- element 1<br/>
- dragging compatibility for IE, Opera, Firefox.
- </div>
函数 fDragging(obj, e, limit) 的各参数解释:
obj: HTML元素对象, 要拖曳的元素
e: 指定为 event 对象, 主要为兼容 Firefox
limit: 布尔值, 指定是否只能在父元素中拖曳, false 可移动至任何位置.函数 fDragging(obj, e, limit) 应该在 HTML onmousedown 属性 下使用, 如:
- linenum
- <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:50px; top: 50px;" οnmοusedοwn="fDragging(this, event, true);">
- element <br/>
- dragging compatibility for IE, Opera, Firefox.
- </div>
shawl.qiu
2006-11-10
http://blog.csdn.net/btbtd函数: fDragging(obj, e, limit) 及使用演示
- linenum
- <!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">
- <!-- DW6 -->
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>shawl.qiu template</title>
- <script type="text/javascript">
- //<![CDATA[
- function fDragging(obj, e, limit){
- if(!e) e=window.event;
- var x=parseInt(obj.style.left);
- var y=parseInt(obj.style.top);
- var x_=e.clientX-x;
- var y_=e.clientY-y;
- if(document.addEventListener){
- document.addEventListener('mousemove', inFmove, true);
- document.addEventListener('mouseup', inFup, true);
- } else if(document.attachEvent){
- document.attachEvent('onmousemove', inFmove);
- document.attachEvent('onmouseup', inFup);
- }
- inFstop(e);
- inFabort(e)
- function inFmove(e){
- var evt;
- if(!e)e=window.event;
- if(limit){
- var op=obj.parentNode;
- var opX=parseInt(op.style.left);
- var opY=parseInt(op.style.top);
- if((e.clientX-x_)<0) return false;
- else if((e.clientX-x_+obj.offsetWidth+opX)>(opX+op.offsetWidth)) return false;
- if(e.clientY-y_<0) return false;
- else if((e.clientY-y_+obj.offsetHeight+opY)>(opY+op.offsetHeight)) return false;
- //status=e.clientY-y_;
- }
- obj.style.left=e.clientX-x_+'px';
- obj.style.top=e.clientY-y_+'px';
- inFstop(e);
- } // shawl.qiu script
- function inFup(e){
- var evt;
- if(!e)e=window.event;
- if(document.removeEventListener){
- document.removeEventListener('mousemove', inFmove, true);
- document.removeEventListener('mouseup', inFup, true);
- } else if(document.detachEvent){
- document.detachEvent('onmousemove', inFmove);
- document.detachEvent('onmouseup', inFup);
- }
- inFstop(e);
- } // shawl.qiu script
- function inFstop(e){
- if(e.stopPropagation) return e.stopPropagation();
- else return e.cancelBubble=true;
- } // shawl.qiu script
- function inFabort(e){
- if(e.preventDefault) return e.preventDefault();
- else return e.returnValue=false;
- } // shawl.qiu script
- }
- //]]>
- </script>
- </head>
- <body>
- <div style=" border:1px dashed blue; width: 760px; height:600px; text-align:center; position:absolute; left:100px; top: 10px;"> this parent
- <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:50px; top: 50px;" οnmοusedοwn="fDragging(this, event, true);">
- element <br/>
- dragging compatibility for IE, Opera, Firefox.
- </div>
- <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:100px; top: 150px;" οnmοusedοwn="fDragging(this, event, true);">
- element 1<br/>
- dragging compatibility for IE, Opera, Firefox.
- </div>
- <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:200px; top: 250px;" οnmοusedοwn="fDragging(this, event, false);">
- element 2<br/>
- dragging compatibility for IE, Opera, Firefox. <br/>
- <font color="red">dragging everywhere</font>
- </div>
- </div>
- </body>
- </html>
Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox)相关推荐
- 【JavaScript】DOM 操作元素样式和元素类名
文章目录 [JavaScript]DOM 操作元素样式和元素类名 一. 操作元素样式 (1)操作行内元素 1. 获取元素的样式 2. 设置元素的样式 (2) 操作非行内元素和行内元素 1. 获取元素的 ...
- shawl.qiu Javascript 前景色背景色调色类 / BgColorScheme v1.0
shawl.qiu Javascript 前景色背景色调色类 / BgColorScheme v1.0 说明: 这个类嘛, 功能就跟标题描述的一样, 也许更多, 这取决于你对色彩的了解程度.. 后续版 ...
- shawl.qiu Javascript 渐隐渐显类 Faded V1.0
shawl.qiu Javascript 渐隐渐显类 Faded V1.0 说明: 嗯, 这个呢, 最近在了解色彩学, 所以陆续会弄一些与色彩相关的东西. 比如整理一些与色彩相关的资料汇编成册, 学习 ...
- JavaScript笔记8-DOM中的事件、获取元素、操作元素
目录 1.API和Web API 2.DOM简介 3.获取元素 3.1 根据 ID 获取 3.2 根据标签名获取 3.3 根据类名返回元素对象集合 3.4 根据选择器返回元素 3.5 获取特殊元素(b ...
- js初识、JS基础交互、JavaScript 元素操作
js初识 js外链引入 外链引入.js 通过script标签的src属性引入外部js文件在外部新建一个后缀名为js的文件注意:用于引入外部js文件的script标签,就不要再写其他的js代码,不会执行 ...
- javascript中的操作元素
操作元素 JavaScript的DOM操作可以改变网页内容,结构和样式,我们可以利用DOM操作元素来改变元素里面的内容.属性等 改变元素内容 element.innerText 从起始位置到种植位 ...
- JavaScript创建元素的三种方法特点及对元素的操作
用js代码创建或添加html元素有三种方法 document.writer() document.write("<p>我就是p1</p>"); 复制代码 注 ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- 第一百二十六节,JavaScript,XPath操作xml节点
第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...
最新文章
- 激光雷达 win10
- 网工必备的存储知识详解
- fastreport调用frf文件直接打印_来吧~~ 这里提供自助打印~
- EMS server Tibco
- nand ubi -1 nand基础
- jqgrid本地数据例子_微型数据转换器如何通过更小尺寸为您带来更多价值
- 惠普战66怎么用u盘进入系统_惠普笔记本怎么用u盘启动装系统,空间也要大所以超来超受欢迎!...
- Linux运维新主机挂载硬盘,linux运维:Linux下添加新硬盘+分区及挂载详细步骤图解...
- 牛客小白月赛3 I 排名【结构体排序/较复杂/细节】
- CSDN获得c币办法
- Linux完全卸载mysql数据库
- 微信小程序快捷键和windows快捷键
- itertools.chain
- 或许你一辈子都是个小人物
- 微商公社新兵连第一天
- MATLAB2016a启动慢
- 三层交换技术..使用三层交换技术实现VLAN间通信
- 一根网线搞定树莓派可视化界面
- IDEA 官方最认可的神级框架!SpringBoot 已成气候!
- 都柏林大学圣三一学院计算机,2021年都柏林大学圣三一学院什么专业好?这些专业你选对了吗?...
热门文章
- Java学习 day11 (继承与多态)接口、多态
- 朋友去华为面试,轻松拿到26K的Offer,羡慕了......
- 北交 操作系统 课程笔记(一)
- 文章管理平台PC端(文章分类)
- css选择器及其优先级
- 诺基亚仍质疑谷歌Android 暂不加入OHA联盟
- 最想和你做的100件事,我们一件一件的去完成
- 使用matlab读取gml网络数据
- InnoDB执行delete时到底做了什么?
- 表格的计算机在哪个文件夹,如何查看当前打开的Excel表格文件在电脑中的保存位置...