zoukankan
html css js c++ java
网页中图片或者表格等元素用鼠标随意拖拽的JS代码[摘抄]
一个网友的代码不错,可以用在.net中,很实用,分享给大家
<!
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
>
Untitled Page
</
title
>
<
script
type
="text/javascript"
language
="javascript"
>
//
为Number增加一个属性,判断当前数据类型是否是数字
Number.prototype.NaN0
=
function
()
{
return
isNaN(
this
)
?
0
:
this
;}
//
全局变量
var
iMouseDown
=
false
;
var
dragObject
=
null
;
//
获得鼠标的偏移量(对象2-对象1)
function
getMouseOffset(target,ev)
{
ev
=
ev
||
window.event;
var
docPos
=
getPosition(target);
var
mousePos
=
mouseCoords(ev);
return
{x:mousePos.x
-
docPos.x,y:mousePos.y
-
docPos.y}
;
}
//
获得事件发生的实际位置----------------------对象1
function
getPosition(e)
{
var
left
=
0
;
var
top
=
0
;
//
相对位置累加得到实际位置
while
(e.offsetParent)
{
left
+=
e.offsetLeft
+
(e.currentStyle
?
(parseInt(e.currentStyle.borderLeftWidth)).NaN0():
0
);
top
+=
e.offsetTop
+
(e.currentStyle
?
(parseInt(e.currentStyle.borderTopWidth)).NaN0():
0
);
e
=
e.offsetParent;
}
left
+=
e.offsetLeft
+
(e.currentStyle
?
(parseInt(e.currentStyle.borderLeftWidth)).NaN0():
0
);
top
+=
e.offsetTop
+
(e.currentStyle
?
(parseInt(e.currentStyle.borderTopWidth)).NaN0():
0
);
return
{x:left,y:top}
;
}
//
获得发生事件鼠标的位置----------------------对象2
function
mouseCoords(ev)
{
if
(ev.pageX
||
ev.pageY)
{
return
{x:ev.pageX,y:ev.pageY}
;
}
return
{x:ev.clientX
+
document.body.scrollLeft
-
document.body.clientLeft,y:ev.clientY
+
document.body.scrollTop
-
document.body.clientTop}
;
}
//
定义可以拖拽的对象
function
makeDragable(item)
{
if
(
!
item)
return
;
//
为可拖拽对象定义一个onmousedown事件的方法
ev
=
window.event;
item.onmousedown
=
function
(ev)
{
dragObject
=
this
;
mouseOffset
=
getMouseOffset(
this
,ev);
return
false
;
}
}
//
定义鼠标点下所调用的方法
function
mouseDown(ev)
{
ev
=
ev
||
window.event;
var
target
=
ev.target
||
ev.srcElement;
if
(target.onmousedown
||
target.getAttribute('DragObj'))
{
return
false
;
}
}
//
鼠标抬起后释放对象
function
mouseUp(ev)
{
dragObject
=
null
;
//
onmouseup事件触发时说明鼠标已经松开,所以设置down变量值为false
iMouseDown
=
false
;
}
//
鼠标移动
function
mouseMove(ev)
{
ev
=
ev
||
window.event;
var
target
=
ev.target
||
ev.srcElement;
var
mousePos
=
mouseCoords(ev);
if
(dragObject)
{
if
(dragObject.style)
{
//
移动对象
dragObject.style.left
=
mousePos.x
-
mouseOffset.x;
dragObject.style.top
=
mousePos.y
-
mouseOffset.y;
}
}
//
lMouseState = iMouseDown;
if
(dragObject)
return
false
;
}
document.onmousedown
=
mouseDown;
document.onmousemove
=
mouseMove;
document.onmouseup
=
mouseUp;
function
moveImg()
{
var
img1
=
document.getElementById('img1');
makeDragable(img1);
}
</
script
>
</
head
>
<
body
onload
="moveImg()"
>
<
div
>
<
img
src
="http://images.163.com/homepage/logo.gif"
alt
=""
id
="img1"
style
="position:absolute;left:0px;top:0px;"
/>
</
div
>
</
body
>
</
html
>
查看全文
相关阅读:
CentOS7虚拟机安装Linux教程及安装后所遇到的问题
华为测试用例模板简写
python字符串大小写转换
python解释器的下载和安装
Git安装和常用命令
python保留两位小数
python中list的使用
安装Maven及Eclipse中配置Maven
伪静态技术
CI框架两个application共用同一套 model
原文地址:https://www.cnblogs.com/weekzero/p/965427.html
最新文章
PostGis常用函数中文介绍
SparkHiveContext和直接Spark读取hdfs上文件然后再分析效果区别
记录解决python在spark运行加载第三方库的问题
centos6.8安装cdh5.10.0(离线版)
导数、梯度和极值
Windows下安装TensorFlow
Oracle10G无图形安装及升级
nginx配合zabbix编译安装时web下一步跳转问题
记录centos6.8安装Oracle10.2.0.1过程中的错误解决
如何让nginx显示文件夹目录
热门文章
算法基础——知识点总结
学习笔记——逻辑斯蒂回归与最大熵模型
室内定位系列(〇)——从人耳听觉定位原理到室内定位技术
学习笔记——决策树
C++程序设计——知识点总结
学习笔记——朴素贝叶斯法
学习笔记——k近邻法
学习笔记——感知机
学习笔记——为什么机器能进行学习和预测?
学习笔记——统计学习方法概论
Copyright © 2011-2022 走看看