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
>
查看全文
相关阅读:
Redis学习之一--基础知识
工作流学习之--TPFlow数据库分析
什么是域名?什么网站名?什么是URL
SASS的升级版--SCSS 基本介绍+Sass使用详解
vue调试工具vue-devtools的安装(win10系统,最新2020年6月的解决方案)
如何运行vue项目
用WebStorm搭建vue项目
Terminal怎么停止VUE项目
VUE 在一个组件中引用另外一个组件的两种方式
Vue.js——60分钟快速入门 开发· webpack 中文文档
原文地址:https://www.cnblogs.com/weekzero/p/965427.html
最新文章
xcode5-ios7-如何添加120x120、152x152、76x76图标
一个苹果证书如何多次使用——导出p12文件
使用slice和concat对数组的深拷贝和浅拷贝
JS数组对象去重(4种方法)
debug断点卡住,谷歌浏览器如何一键清除所有断点
discuz 网站空白怎么解决
discuz论坛更换域名,搬家步骤
Centos7下无法远程连接mysql数据库的原因与解决
IDEA下guns打包
百度地图绘制行驶轨迹、折线上添加箭头、修改地图底色
热门文章
百度地图api写一个有标注点有连线的地图
百度地图API显示多个标注点带提示的代码
PHPStorm启动问题--Failed to load JVM DLL
问题--Notepad++保存文件遇到Failed to save file
数据库应用之--Redis+mysql实现大量数据的读写,以及高并发
Python学习之--用户输入以及运算
Python学习之--字典
Python学习之--列表
Python学习之--字符串的使用
Python学习之--基础语法
Copyright © 2011-2022 走看看