zoukankan
html css js c++ java
类似google拖拽效果的原理实现(来自codeproject)
页面内容很简单 有三个div 一个用来拖拽的id是“a”,另外三个都是用来放置“a”的;
实现原理不难:
窗口打开后调用MakeElementDraggable函数。
MakeElementDraggable函数功能如下:
把a的鼠标按下事件的响应函数指向 InitiateDrag,它将重新定位拖拽窗口为鼠标所在位置,然后鼠标移动事件用drag函数响应,鼠标放开事件用drop函数响应,这两个函数自己看吧,就是实现动态拖拽和在指定区域放置id为a的窗口。
代码下载。
页面代码
<!
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
>
Drag and Drop Demo
</
title
>
<
style
type
="text/css"
>
.dragElement
{
}
{
background-color
:
Green
;
position
:
absolute
;
z-index
:
5000
;
display
:
block
;
padding-top
:
30px
;
}
.dropZone
{
}
{
background-color
:
Blue
;
width
:
300px
;
height
:
300px
;
position
:
absolute
;
top
:
100px
;
right
:
200px
;
}
.highlightDropZone
{
}
{
background-color
:
Yellow
;
}
.DefaultDropZoneColor
{
}
{
background-color
:
Blue
;
}
</
style
>
</
head
>
<
body
>
<
form
id
="form1"
runat
="server"
>
<
div
>
<
div
id
="a"
class
="dragElement"
>
拖拽窗口
</
div
>
<
div
id
="dZone"
style
="position:absolute; top:100px; right:200; 300px; height:300px"
class
="DefaultDropZoneColor"
>
放开区域 1
</
div
>
<
div
id
="dZone2"
class
="DefaultDropZoneColor"
style
="position:absolute; top:500px; right:200px; 300px; height:300px"
>
放开区域 2
</
div
>
<
div
id
="dZone3"
class
="DefaultDropZoneColor"
style
="position:absolute; top:300;right:100px; 100px; height:200px"
>
放开区域 3
</
div
>
</
div
>
</
form
>
</
body
>
</
html
>
<
script
language
="javascript"
type
="text/javascript"
>
var
dropZoneArray
=
new
Array(
5
);
dropZoneArray[
0
]
=
"
dZone
"
;
dropZoneArray[
1
]
=
"
dZone2
"
;
dropZoneArray[
2
]
=
"
dZone3
"
;
var
mouseState
=
'up';
function
MakeElementDraggable(obj)
{
var
startX
=
0
;
var
startY
=
0
;
function
InitiateDrag(e)
{
var
evt
=
e
||
window.event;
startX
=
parseInt(evt.clientX);
startY
=
parseInt(evt.clientY);
obj.style.top
=
parseInt(startY)
+
'px';
obj.style.left
=
parseInt(startX)
+
'px';
document.onmousemove
=
Drag;
document.onmouseup
=
Drop;
return
false
;
}
function
Drop(e)
{
var
evt
=
e
||
window.event;
//
check that if we are in the drop zone
if
(IsInDropZone(evt))
{
document.onmouseup
=
null
;
document.onmousemove
=
null
;
}
}
function
Drag(e)
{
//
only drag when the mouse is down
var
dropZoneObject;
var
evt
=
e
||
window.event;
obj.style.top
=
evt.clientY
+
'px';
obj.style.left
=
evt.clientX
+
'px';
//
Check if we are in the drop Zone
if
(IsInDropZone(evt))
{
dropZoneObject
=
evt.srcElement;
dropZoneObject.className
=
'highlightDropZone';
}
else
{
ResetColor();
}
}
a.onmousedown
=
InitiateDrag;
}
function
ResetColor()
{
document.getElementById(
"
dZone
"
).className
=
'DefaultDropZoneColor';
document.getElementById(
"
dZone2
"
).className
=
'DefaultDropZoneColor';
document.getElementById(
"
dZone3
"
).className
=
'DefaultDropZoneColor';
}
function
IsInDropZone(evt)
{
var
result
=
false
;
var
obj
=
evt.srcElement;
//
iterate through the array and find it the id exists
for
(i
=
0
; i
<
dropZoneArray.length; i
++
)
{
if
(obj.id
==
dropZoneArray[i])
{
result
=
true
;
break
;
}
}
return
result;
}
//
make the element draggable
window.onload
=
MakeElementDraggable(document.getElementById(
"
a
"
));
</
script
>
查看全文
相关阅读:
REP开发技巧
css grid栅格布局
flex学习, 尝试布局一个计算器
sublime text html插件emmet
flex布局
SQL Server为字段添加默认值
windows和linux文件输
python eric6 IDE
git撤销修改
pyQt5
原文地址:https://www.cnblogs.com/ddr888/p/674630.html
最新文章
ionic 布局
ng-repeat不添加容器标签
npm install node-sass失败
angularjs 动态表单, 原生事件中调用angular方法
ionic build
angularjs drag and drop
sublime text修改package安装路径
nodejs安装
ionic tab显示到顶部去了
NPM慢怎么办
热门文章
ui-router 1.0 000
weex开发错误汇总
国内混合APP开发技术选型
Gradle Build Tool
cordova插件开发
使用 IBM Worklight 开发跨平台的 HTML5 视频播放混合应用程序
stingray中使用angularjs
ionic 001
SVN命令行更新代码
交易系统 3代
Copyright © 2011-2022 走看看