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
>
查看全文
相关阅读:
需求层次性、需求分类
CSMA/CA协议详解
Git笔记:GitFlow工作流模拟、分支管理、使用规范
Vue.js笔记(四) 路由router与重定向
DolphinScheduler 源码分析之 DAG类
linux 一分钟安装maven linux
linux 一分钟搭建zookeeper linux 单机版(亲测可用)
canal-adapter1.1.14最新版本安装的过程中出现的NullPointerException异常
yum.repos.d中的变量($releasever与$basearch)
索引知识
原文地址:https://www.cnblogs.com/ddr888/p/674630.html
最新文章
Ajax 简单例子
Ajax 入门
初识 Github
Scss之基本使用
Sass 入门
职能管理之 决策与计划
批判性思维
【暑假集训模拟DAY9】数学问题
【暑假集训模拟DAY8】树上问题
【暑假集训模拟DAY5】杂项-分治&二分&倍增&快速幂
热门文章
【暑假集训模拟DAY3】数据结构
【暑假集训模拟DAY2】贪心
【暑假集训模拟DAY1】搜索&枚举
【洛谷P2536】[AHOI2005]病毒检测
计算机网络:应用层
计算机网络:网络概述
CPP:构造函数&成员初始化表&拷贝构造函数
Spring Boot + Vue跨域问题解决方案
P4716 朱刘算法/最小树形图/有向图最小生成树 python实现
Vue.js笔记(五) 路由传参的三种方式
Copyright © 2011-2022 走看看