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
>
查看全文
相关阅读:
数字重排
环游世界
Hibernate笔记(一)增删改查CRUD
Sliding Window Algorithm 滑动窗口算法
纯HTML/CSS/JS实现淘宝、京东两种轮播图
COA计算机组织与结构笔记
数据结构与算法笔记:最小生成树Kruskal、Prim算法与JAVA实现
数据结构与算法笔记:图的基础与JAVA实现
数据结构与算法:并查集
JDBC学习笔记
原文地址:https://www.cnblogs.com/weekzero/p/965427.html
最新文章
ORACLE 用32進制表示月中的一天
PostgreSQL高可用(pgpool+异步流复制)
亿级ELK日志平台构建实践
常用的ELK/EFK架构
MySQL 5.7使用Xtrabackup添加新的Slave
Xtrabackup在线添加从库
MySQL之Load data infile快速导入数据
XtraBackup备份与恢复实例讲解
SaltStack常见模块案例分析
CentOS 7使用Saltstack源码安装MySQL 5.7.32
热门文章
MySQL热备工具Xtrabackup的使用
subline常用快捷键
float之脱离文档流
2021.6.12模拟赛
P1018 [NOIP2000 提高组] 乘积最大
2021.6.8背包总结
杠杆数/平衡数【数位dp】
质数和分解
潜水员【二维费用背包】
bitset及压位运算
Copyright © 2011-2022 走看看