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
>
查看全文
相关阅读:
多态
封装,继承,多态
基本类型和引用类型的区别
第七天 面向对象
什么是Java线程池
游戏内核架构
放松
静不下来心写代码
速度和正确率
理顺思路
原文地址:https://www.cnblogs.com/weekzero/p/965427.html
最新文章
域名解析
div居中
input padding宽度问题
centos mysql5.6.3 最大连接数设置无效问题
Go学习笔记2
vue-element-admin学习笔记--F5刷新页面导致主题失效问题
Go学习笔记1
GitLab重置root密码
java8 Stream API及Collectors类常用方法
20200815-尴尬的工作
热门文章
Android第一行代码(第二版)读书笔记2
JNI操作Windows注册表(Java核心技术卷2第12章原书例子)
Android第一行代码(第二版)读书笔记1
20200628-关于Android
API的使用 compare接口的用法
final String 时间类 包装类
集合框架
设计模式
抽象类,接口
面向对象总结
Copyright © 2011-2022 走看看