zoukankan
html css js c++ java
js对象拖动
<
SCRIPT LANGUAGE
=
"
JavaScript
"
>
<!--
var
currentMoveObj
=
null
;
//
当前拖动对象
var
relLeft;
//
鼠标按下位置相对对象位置
var
relTop;
function
f_mdown(obj)
{
currentMoveObj
=
obj;
//
当对象被按下时,记录该对象
currentMoveObj.style.position
=
"
absolute
"
;
relLeft
=
event.x
-
currentMoveObj.style.pixelLeft;
relTop
=
event.y
-
currentMoveObj.style.pixelTop;
}
window.document.onmouseup
=
function
()
{
currentMoveObj
=
null
;
//
当鼠标释放时同时释放拖动对象
}
function
f_move(obj)
{
if
(currentMoveObj
!=
null
)
{
currentMoveObj.style.pixelLeft
=
event.x
-
relLeft;
currentMoveObj.style.pixelTop
=
event.y
-
relTop;
}
}
//
-->
</
SCRIPT
>
<
BODY
>
<
TABLE width
=
"
100
"
border
=
1
onselectstart
=
"
return false
"
style
=
"
position:absolute;left:50;top:50
"
onmousedown
=
"
f_mdown(this)
"
onmousemove
=
"
f_move(this)
"
>
<
TR
>
<
TD bgcolor
=
"
#CCCCCC
"
align
=
"
center
"
style
=
"
cursor:move
"
>
title1
</
TD
>
</
TR
>
<
TR
>
<
TD align
=
"
center
"
height
=
"
60
"
>
content
</
TD
>
</
TR
>
</
TABLE
>
<
TABLE width
=
"
100
"
border
=
1
onselectstart
=
"
return false
"
style
=
"
position:absolute;left:350;top:250
"
onmousedown
=
"
f_mdown(this)
"
onmousemove
=
"
f_move(this)
"
>
<
TR
>
<
TD bgcolor
=
"
#CCCCCC
"
align
=
"
center
"
style
=
"
cursor:move
"
>
title2
</
TD
>
</
TR
>
<
TR
>
<
TD align
=
"
center
"
height
=
"
60
"
>
content
</
TD
>
</
TR
>
</
TABLE
>
</
BODY
>
第二个示例
<
html
>
<
head
>
<
title
>
_xWin
</
title
>
<
meta http
-
equiv
=
"
Content-Type
"
content
=
"
text/html; charset=gb2312
"
>
<
META NAME
=
"
Description
"
CONTENT
=
"
http://www.51windows.Net
"
>
<
style type
=
'text
/
css'
>
<!--
body
{font
-
size:12px;}
a:visited
{text
-
decoration:none;color:slategray;}
a:hover
{text
-
decoration:underline;color:slategray;}
a:link
{text
-
decoration:none;color:slategray;}
-->
</
style
>
<
script language
=
JScript
>
<!--
//
可以打包为js文件;
var
x0
=
0
,y0
=
0
,x1
=
0
,y1
=
0
;
var
offx
=
6
,offy
=
6
;
var
moveable
=
false
;
var
hover
=
'orange',normal
=
'#
336699
';
//
color;
var
index
=
10000
;
//
z-index;
//
开始拖动;
function
startDrag(obj)
{
if
(event.button
==
1
)
{
//
锁定标题栏;
obj.setCapture();
//
定义对象;
var
win
=
obj.parentNode;
var
sha
=
win.nextSibling;
//
记录鼠标和层位置;
x0
=
event.clientX;
y0
=
event.clientY;
x1
=
parseInt(win.style.left);
y1
=
parseInt(win.style.top);
//
记录颜色;
normal
=
obj.style.backgroundColor;
//
改变风格;
obj.style.backgroundColor
=
hover;
win.style.borderColor
=
hover;
obj.nextSibling.style.color
=
hover;
sha.style.left
=
x1
+
offx;
sha.style.top
=
y1
+
offy;
moveable
=
true
;
}
}
//
拖动;
function
drag(obj)
{
if
(moveable)
{
var
win
=
obj.parentNode;
var
sha
=
win.nextSibling;
win.style.left
=
x1
+
event.clientX
-
x0;
win.style.top
=
y1
+
event.clientY
-
y0;
sha.style.left
=
parseInt(win.style.left)
+
offx;
sha.style.top
=
parseInt(win.style.top)
+
offy;
}
}
//
停止拖动;
function
stopDrag(obj)
{
if
(moveable)
{
var
win
=
obj.parentNode;
var
sha
=
win.nextSibling;
var
msg
=
obj.nextSibling;
win.style.borderColor
=
normal;
obj.style.backgroundColor
=
normal;
msg.style.color
=
normal;
sha.style.left
=
obj.parentNode.style.left;
sha.style.top
=
obj.parentNode.style.top;
obj.releaseCapture();
moveable
=
false
;
}
}
//
获得焦点;
function
getFocus(obj)
{
if
(obj.style.zIndex
!=
index)
{
index
=
index
+
2
;
var
idx
=
index;
obj.style.zIndex
=
idx;
obj.nextSibling.style.zIndex
=
idx
-
1
;
}
}
//
最小化;
function
min(obj)
{
var
win
=
obj.parentNode.parentNode;
var
sha
=
win.nextSibling;
var
tit
=
obj.parentNode;
var
msg
=
tit.nextSibling;
var
flg
=
msg.style.display
==
"
none
"
;
if
(flg)
{
win.style.height
=
parseInt(msg.style.height)
+
parseInt(tit.style.height)
+
2
*
2
;
sha.style.height
=
win.style.height;
msg.style.display
=
"
block
"
;
obj.innerHTML
=
"
0
"
;
}
else
{
win.style.height
=
parseInt(tit.style.height)
+
2
*
2
;
sha.style.height
=
win.style.height;
obj.innerHTML
=
"
2
"
;
msg.style.display
=
"
none
"
;
}
}
//
创建一个对象;
function
xWin(id,w,h,l,t,tit,msg)
{
index
=
index
+
2
;
this
.id
=
id;
this
.width
=
w;
this
.height
=
h;
this
.left
=
l;
this
.top
=
t;
this
.zIndex
=
index;
this
.title
=
tit;
this
.message
=
msg;
this
.obj
=
null
;
this
.bulid
=
bulid;
this
.bulid();
}
//
初始化;
function
bulid()
{
var
str
=
""
+
"
<div id=xMsg
"
+
this
.id
+
"
"
+
"
style='
"
+
"
z-index:
"
+
this
.zIndex
+
"
;
"
+
"
"
+
this
.width
+
"
;
"
+
"
height:
"
+
this
.height
+
"
;
"
+
"
left:
"
+
this
.left
+
"
;
"
+
"
top:
"
+
this
.top
+
"
;
"
+
"
background-color:
"
+
normal
+
"
;
"
+
"
color:
"
+
normal
+
"
;
"
+
"
font-size:8pt;
"
+
"
font-family:Tahoma;
"
+
"
position:absolute;
"
+
"
cursor:default;
"
+
"
border:2px solid
"
+
normal
+
"
;
"
+
"
'
"
+
"
onmousedown='getFocus(this)'>
"
+
"
<div
"
+
"
style='
"
+
"
background-color:
"
+
normal
+
"
;
"
+
"
"
+
(
this
.width
-
2
*
2
)
+
"
;
"
+
"
height:20;
"
+
"
color:white;
"
+
"
'
"
+
"
onmousedown='startDrag(this)'
"
+
"
onmouseup='stopDrag(this)'
"
+
"
onmousemove='drag(this)'
"
+
"
ondblclick='min(this.childNodes[1])'
"
+
"
>
"
+
"
<span style='
"
+
(
this
.width
-
2
*
12
-
4
)
+
"
;padding-left:3px;'>
"
+
this
.title
+
"
</span>
"
+
"
<span style='12;border-0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>
"
+
"
<span style='12;border-0px;color:white;font-family:webdings;' onclick='ShowHide(\
""
+this.id+
"
\
"
,null)'>r</span>
"
+
"
</div>
"
+
"
<div style='
"
+
"
100%;
"
+
"
height:
"
+
(
this
.height
-
20
-
4
)
+
"
;
"
+
"
background-color:white;
"
+
"
line-height:14px;
"
+
"
word-break:break-all;
"
+
"
padding:3px;
"
+
"
'>
"
+
this
.message
+
"
</div>
"
+
"
</div>
"
+
"
<div id=xMsg
"
+
this
.id
+
"
bg style='
"
+
"
"
+
this
.width
+
"
;
"
+
"
height:
"
+
this
.height
+
"
;
"
+
"
top:
"
+
this
.top
+
"
;
"
+
"
left:
"
+
this
.left
+
"
;
"
+
"
z-index:
"
+
(
this
.zIndex
-
1
)
+
"
;
"
+
"
position:absolute;
"
+
"
background-color:black;
"
+
"
filter:alpha(opacity=40);
"
+
"
'></div>
"
;
document.body.insertAdjacentHTML(
"
beforeEnd
"
,str);
}
//
显示隐藏窗口
function
ShowHide(id,dis)
{
var
bdisplay
=
(dis
==
null
)
?
((document.getElementById(
"
xMsg
"
+
id).style.display
==
""
)
?
"
none
"
:
""
):dis
document.getElementById(
"
xMsg
"
+
id).style.display
=
bdisplay;
document.getElementById(
"
xMsg
"
+
id
+
"
bg
"
).style.display
=
bdisplay;
}
//
modify by haiwa @ 2005-7-14
//
http://www.51windows.Net
//
-->
</
script
>
<
script language
=
'JScript'
>
<!--
function
initialize()
{
var
b
=
new
xWin(
"
2
"
,
240
,
200
,
100
,
100
,
"
印章窗口
"
,
"
这里面是一个透明的GIF印章图
"
);
}
window.onload
=
initialize;
//
-->
</
script
>
</
head
>
<
base target
=
"
_blank
"
>
<
body onselectstart
=
'
return
false
' oncontextmenu
=
'
return
false
'
>
<
a onclick
=
"
ShowHide('2',null);return false;
"
href
=
""
>
加盖印章
</
a
>
</
body
>
</
html
>
查看全文
相关阅读:
http经典解析
js实现canvas保存图片为png格式并下载到本地
你所不知的 CSS ::before 和 ::after 伪元素用法
js自动下载
CSS 实现隐藏滚动条同时又可以滚动
checkbox与文字对齐
利用html2canvas截图,得到base64上传ajax
bootstrap-datepicker简单使用
移动端禁止滚动
h5移动网页唤起App
原文地址:https://www.cnblogs.com/yg_zhang/p/570500.html
最新文章
剑指offer第六章
剑指offer第五章
剑指offer第四章
剑指offer第三章
剑指offer第二章
美团点评2017校招笔试真题-算法工程师B
美团点评2017校招笔试真题-算法工程师A
Java RMI(远程方法调用) 实例与分析
Java中动态代理技术生成的类与原始类的区别
程序中的乐观锁与悲观锁,以及动手实现乐观锁
热门文章
JVM内存区域划分Eden Space、Survivor Space、Tenured Gen,Perm Gen解释(转)
(二十一)访问者模式-代码实现
(二十)解释器模式-代码实现
(十九)中介者模式-代码实现
(十八)策略模式-代码实现
(十七)状态模式-代码实现
(十五)责任链模式-代码实现
cookie中文转码
javaScript随机数
alert样式优化
Copyright © 2011-2022 走看看