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
>
查看全文
相关阅读:
Pig Latin-freecodecamp算法题目
Search and Replace -freecodecamp算法题目
Where art thou-freecodecamp算法题目
Roman Numeral Converter-freecodecamp算法题目
Diff Two Arrays-freecodecamp算法题目
Asp.Net前台调用后台变量
ASP.NET获取前端页面的Html标签的值
echart 设置图例图标形状
解决tableexport导出到excel中有关中文乱码的问题
C# Async与Await用法
原文地址:https://www.cnblogs.com/yg_zhang/p/570500.html
最新文章
计算机网络 基本知识
计算机网络 DNS协议
计算机网络 hosts文件
计算机网络 HTTP协议
Django框架、Flask框架、SSH和SSM
ASP.NET CORE 实体类映射 AUTOMAPPER
ASP .NET CORE 连接mysql数据库
Syste.invalidOperaationException:"The required column 'DISABLED' was not present in the results of a 'FromSql'"
System.InvalidOperationException:“No coercion operator is defined between types 'System.Int16' and '...
.net 分组groupby筛选表中数据并将查询结果映射到datamodel中
热门文章
Unable to resolve service for type"xxx.Interface.xxx" While attempting to activate 'xxx.controller.xxxcontroller'
html颜色代码
C# 获取当前日期当年的周数
.net MVC 数据传递ViewBag的使用
MySql生成GUIID
Convert HTML Entities-freecodecamp算法题目
Sorted Union-freecodecamp算法题目
Boo who-freecodecamp算法题目
Missing letters-freecodecamp算法题目
DNA Pairing-freecodecamp算法题目
Copyright © 2011-2022 走看看