在网页上实现拖拽其实不难，第一我们需要知道鼠标的位置，第二我们需要知道当用户点击一个网页元素时这个元素要能够拖拽。
--------------------------------------------------------------
点此查看示例一
--------------------------------------------------------------
获取鼠标移动信息
开始我们需要获取鼠标的坐标．我们添加一个document.onmousemove 就可以达到此目的:
Javascript:
-
-
document.
onmousemove
= mouseMove;
-
-
function
mouseMove
(
ev
)
{
-
ev = ev || window.
event
;
-
var
mousePos = mouseCoords
(
ev
)
;
-
}
-
-
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
-
}
;
-
}
-
--------------------------------------------------------------
点此查看示例二
--------------------------------------------------------------
我们首先要声明一个 evnet 对象，无论移动、点击、按键等，都会激活一个 evnet ， 在 Internet Explorer 里， event 是全局变量，会被存储在 window.event 里． 在 firefox 或者其他浏 览器，event 会被相应的函数获取．当我们将mouseMove函数赋值于document.onmousemove，mouseMove 会获取鼠 标移动事件。
为了让 ev 在所有浏览器下获取了 event 事件，在Firefox下"||window.event"将不起作用，因为ev已经有了赋值。在 MSIE 中 ev 为空，所以得到 window.event 。
因为在这篇文章中我们需要多次获取鼠标位置，所以我们设计了一个 mouseCoords 函数，它包含一个参数 ： event 。
因为我们要在 MSIE 和其他浏览器下运行，Firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于 文档的位置，如果你有一个 500*500 的窗口并且你的鼠标在绝对中间，那么 pageX 和 pageY 的值都是 250，如果你向下滚 动 500， 那么 pageY 将变成 750。
MSIE 正好相反，它使用 event.clientX 和 event.clientY 表示鼠标相当于窗口的位置，而不是文档。在同样的例子中，如 果你向下滚动500，clientY 依然是 250，因此，我们需要添加 scrollLeft 和 scrollTop 这两个相对于文档的属性。最 后，MSIE 中文档并不是从 0，0 开始，而是通常有一个小的边框（通常是 2 象素），边框的大小定义 在 document.body.clientLeft 和 clientTop 中，我们也把这些加进去。
很幸运，我们现在已经用 mouseCoords 函数解决了坐标问题，不需为此费心了。
捕捉鼠标点击
下面我们需要知道鼠标什么时候点击和什么时候释放，如果你跳过此步，当你的鼠标移动到这些可拖动的元素是，他们就开始“拖动”了，这将是非常恼人并且违反直觉的。
这里有两个函数帮助我们：onmousedown 和 onmouseup ，我们预先设置一个函数获 取 document.onmousedown 和 document.onmouseup，这样看起来我们已经能够获 取 document.onmousedown 和 document.onmouseup，但是，当我们获取 了 document.onmousedown ，同时也激活了点击属性，如：text, images, tables 等，但是我们只想取得那些能够 拖动得属性，所有我们设置函数来获取我们想要移动的对象。
Javascript:
-
-
document.
onmouseup
= mouseUp;
-
var
dragObject =
null
;
-
-
function
makeClickable
(
object
)
{
-
object.
onmousedown
=
function
(
)
{
-
dragObject =
this
;
-
}
-
}
-
-
function
mouseUp
(
ev
)
{
-
dragObject =
null
;
-
}
-
我们现在有了一个可定义的 dragObject，它获取你点击的任意元素，如果你释放鼠标按钮， dragObject 被清空，所以如果 dragObject != null ，我们就知道我们可能在拖动着什么。
--------------------------------------------------------------
点此查看示例三
--------------------------------------------------------------
移动一个元素
我们现在已经知道如何捕捉鼠标的移动和点击，剩下的就是拖动了，
首先，要明确我们想要拖动的位置，将 position 设置为 “absolute” 意味着当你设置 style.top 或 style.left ，这个尺度是从页面的 top-left 开始算的，这样我们就可以继续了。
当我们设置 item.style.position='absolute'，所有的需要做的就是改变 top 或 left 的值，这样就可以移动了。
Javascript:
-
-
document.
onmousemove
= mouseMove;
-
document.
onmouseup
= mouseUp;
-
-
var
dragObject =
null
;
-
var
mouseOffset =
null
;
-
-
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
}
;
-
}
-
-
function
getPosition
(
e
)
{
-
var
left =
0
;
-
var
top =
0
;
-
-
while
(
e.
offsetParent
)
{
-
left += e.
offsetLeft
;
-
top += e.
offsetTop
;
-
e = e.
offsetParent
;
-
}
-
-
left += e.
offsetLeft
;
-
top += e.
offsetTop
;
-
-
return
{
x:left, y:top
}
;
-
}
-
-
function
mouseMove
(
ev
)
{
-
ev = ev || window.
event
;
-
var
mousePos = mouseCoords
(
ev
)
;
-
-
if
(
dragObject
)
{
-
dragObject.
style
.
position
=
'absolute'
;
-
dragObject.
style
.
top
= mousePos.
y
- mouseOffset.
y
;
-
dragObject.
style
.
left
= mousePos.
x
- mouseOffset.
x
;
-
-
return
false
;
-
}
-
}
-
function
mouseUp
(
)
{
-
dragObject =
null
;
-
}
-
-
function
makeDraggable
(
item
)
{
-
if
(
!
item
)
return
;
-
item
.
onmousedown
=
function
(
ev
)
{
-
dragObject =
this
;
-
mouseOffset = getMouseOffset
(
this
, ev
)
;
-
return
false
;
-
}
-
}
-
--------------------------------------------------------------
点此查看示例四
--------------------------------------------------------------
你可能注意到这些代码基本上是前面的集合，将前面的示例合在一起，就可以实现拖拽了。
当我们点击一个元素，我们还会获取其他变量，mouseOffset 定义着我们的鼠标位置，如果我们有一个 20*20 的图片，并且点击在它的中间， 那么 mouseOffset 就是 {x:10, y:10}，如果点击在图片的 top-left ，这个值就是 {x:0, y:0} 。我们用 这些方法获取我们的鼠标和图片的信息，如果忽略这些，我们将永远处在相同的元素位置。
我们的 mouseOffset 函数使用了另外的函数 getPosition，getPosition 的目的是返回元素相当于文档的位置，我们仅仅 读取 item.offsetLeft 或 item.style.left ，将得到元素相对于其父元素的位置，而不是整个文档，所有的脚本都是相对于 文档，这样就会好一些。
为了完成 getPosition 的任务，必须循环取得此的父级，我们将得到元素的 left－top 的位置．我们可以管理想要的 top 与 left 列表．
当我们有了这些信息，并且移动鼠标，mouseMove 将一直运行，首先，我们要确定元素的 style.position 是 absolute，接 着我们拖拽元素到任何我们我们已经定义好的位置，当鼠标释放，dragObject 被重置， mouseMove 将不再做任何事情。
拖拽一个元素
前面的例子目的很简单，就是拖拽item到我们希望到的地方．我们经常还有其他目的如删除item，比如我们可以将item拖到垃圾桶里，或者其他页面定义的位置．
很不幸，我们有一个很大的难题，当我们拖拽，item会在鼠标之下，比如mouseove,mousedown,mouseup或者其他mouse action．如果我们拖拽一个item到垃圾桶上，鼠标信息还在item上，不在垃圾桶上．
怎么解决这个问题呢？有几个方法可以来解决．第一，这是以前比较推荐的，我们在移动鼠标时item会跟随鼠标，并占用了 mouseover/mousemove等鼠标事件，我们不这样做，只是让item跟随着鼠标，并不占用mouseover等鼠标事件，这样会解决问题， 但是这样并不好看，我们还是希望item能直接跟在mouse下．
另一个选择是不做item的拖拽．你可以改变鼠标指针来显示需要拖拽的item，然后放在鼠标释放的位置．这个解决方案，也是因为美学原因不予接受．
最后的解决方案是，我们并不去除拖拽效果．这种方法比前两种繁杂许多，我们需要定义我们需要释放目标的列表，当鼠标释放时，手工去检查释放的位置是否是在目标列表位置上，如果在，说明是释放在目标位置上了．
Javascript:
-
-
/*
-
All code from the previous example is needed with the exception
-
of the mouseUp function which is replaced below
-
*/
-
-
var
dropTargets =
[
]
;
-
-
function
addDropTarget
(
dropTarget
)
{
-
dropTargets.
push
(
dropTarget
)
;
-
}
-
-
function
mouseUp
(
ev
)
{
-
ev = ev || window.
event
;
-
var
mousePos = mouseCoords
(
ev
)
;
-
-
for
(
var
i=
0
; i<dropTargets.
length
; i++
)
{
-
var
curTarget = dropTargets
[
i
]
;
-
var
targPos = getPosition
(
curTarget
)
;
-
var
targWidth = parseInt
(
curTarget.
offsetWidth
)
;
-
var
targHeight = parseInt
(
curTarget.
offsetHeight
)
;
-
-
if
(
-
(
mousePos.
x
> targPos.
x
)
&&
-
(
mousePos.
x
<
(
targPos.
x
+ targWidth
)
)
&&
-
(
mousePos.
y
> targPos.
y
)
&&
-
(
mousePos.
y
<
(
targPos.
y
+ targHeight
)
)
)
{
-
// dragObject was dropped onto curTarget!
-
}
-
}
-
-
dragObject =
null
;
-
}
-
--------------------------------------------------------------
点此查看示例五
--------------------------------------------------------------
鼠标释放时会去取是否有drop属性，如果存在，同时鼠标指针还在drop的范围内，执行drop操作．我们检查鼠标指针位置是否在目标范围是用 (mousePos.x>targetPos.x)，而且还要符合条件(mousePos.x< (targPos.x + targWidth))．如果所有的条件符合，说明指针确实在范围内，可以执行drop指令了．
把所有的内容集合到一起
最后我们拥有了所有的drag/drop的脚本片断！下一个事情是我们将创建一个DOM处理。
下面的代码将创建container(容器),而且使任何一个需要drag/drop的item变成一个容器的item.代码在这个文章第二个demo的后面，它可以用户记录一个list(列表)，定为一个导航窗口在左边或者右边，或者更多的函数你可以想到的．
下一步我们将通过"假代码"让reader看到真代码，下面为推荐:
- 当document第一次载入时，创建dragHelper DIV.dragHelper将给移动的item加阴影．真实的item没有被dragged，只是用了insertBefor和appendChild来移动了，我们隐藏了dragHelper
- 有了mouseDown与mouseUp函数．所有的操作会对应到当到iMouseDown的状态中，只有当mouse左键为按下时iMouseDown才为真，否则为假．
- 我们创建了全局变量DragDrops与全局函数CreateDragContainer.DragDrops包含了一系列相 对彼此的容器．任何参数(containers)将通过CreatedcragContainer进行重组与序列化，这样可以自由的移 动．CreateDragContainer函数也将item进行绑定与设置属性．
- 现在我们的代码知道每个item的加入，当我们移动处mouseMove，mouseMove函数首先会设置变量target，鼠标移动在上面的item，如果这个item在容器中(checked with getAttribute):
- 运行一小段代码来改变目标的样式．创造rollover效果
- 检查鼠标是否没有放开，如果没有
- 设置curTarget代表当前item
- 记录item的当前位置，如果需要的话，我们可以将它返回
- 克隆当前的item到dragHelper中，我们可以移动带阴影效果的item.
- item拷贝到dragHelper后，原有的item还在鼠标指针下，我们必须删除掉dragObj，这样脚本起作用，dragObj被包含在一个容器中．
- 抓取容器中所有的item当前坐标，高度/宽度，这样只需要记录一次，当item被drag时，每随mouse移动，每移钟就会记录成千上万次．
- 如果没有，不需要做任何事，因为这不是一个需要移动的item
- 检查curTarget，它应该包含一个被移动的item,如果存在，进行下面操作
- 开始移动带有阴影的item，这个item就是前文所创建的
- 检查每个当前容器中的container，是否鼠标已经移动到这些范围内了
- 我们检查看一下正在拖动的item是属于哪个container
- 放置item在一个container的某一个item之前，或者整个container之后
- 确认item是可见的
- 如果鼠标不在container中，确认item是不可见了．
- 剩下的事就是捕捉mouseUp的事件了
Javascript:
-
-
// iMouseDown represents the current mouse button state: up or down
-
/*
-
lMouseState represents the previous mouse button state so that we can
-
check for button clicks and button releases:
-
-
if(iMouseDown && !lMouseState) // button just clicked!
-
if(!iMouseDown && lMouseState) // button just released!
-
*/
-
var
mouseOffset =
null
;
-
var
iMouseDown =
false
;
-
var
lMouseState =
false
;
-
var
dragObject =
null
;
-
-
// Demo 0 variables
-
var
DragDrops =
[
]
;
-
var
curTarget =
null
;
-
var
lastTarget =
null
;
-
var
dragHelper =
null
;
-
var
tempDiv =
null
;
-
var
rootParent =
null
;
-
var
rootSibling =
null
;
-
-
Number.
prototype
.
NaN0
=
function
(
)
{
return
isNaN
(
this
)
?
0
:
this
;
}
-
-
function
CreateDragContainer
(
)
{
-
/*
-
Create a new "Container Instance" so that items from one "Set" can not
-
be dragged into items from another "Set"
-
*/
-
var
cDrag = DragDrops.
length
;
-
DragDrops
[
cDrag
]
=
[
]
;
-
-
/*
-
Each item passed to this function should be a "container". Store each
-
of these items in our current container
-
*/
-
for
(
var
i=
0
; i<arguments.
length
; i++
)
{
-
var
cObj = arguments
[
i
]
;
-
DragDrops
[
cDrag
]
.
push
(
cObj
)
;
-
cObj.
setAttribute
(
'DropObj'
, cDrag
)
;
-
-
/*
-
Every top level item in these containers should be draggable. Do this
-
by setting the DragObj attribute on each item and then later checking
-
this attribute in the mouseMove function
-
*/
-
for
(
var
j=
0
; j<cObj.
childNodes
.
length
; j++
)
{
-
-
// Firefox puts in lots of #text nodes...skip these
-
if
(
cObj.
childNodes
[
j
]
.
nodeName
==
'#text'
)
continue
;
-
-
cObj.
childNodes
[
j
]
.
setAttribute
(
'DragObj'
, cDrag
)
;
-
}
-
}
-
}
-
-
function
mouseMove
(
ev
)
{
-
ev = ev || window.
event
;
-
-
/*
-
We are setting target to whatever item the mouse is currently on
-
-
Firefox uses event.target here, MSIE uses event.srcElement
-
*/
-
var
target = ev.
target
|| ev.
srcElement
;
-
var
mousePos = mouseCoords
(
ev
)
;
-
-
// mouseOut event - fires if the item the mouse is on has changed
-
if
(
lastTarget &&
(
target!==lastTarget
)
)
{
-
// reset the classname for the target element
-
var
origClass = lastTarget.
getAttribute
(
'origClass'
)
;
-
if
(
origClass
)
lastTarget.
className
= origClass;
-
}
-
-
/*
-
dragObj is the grouping our item is in (set from the createDragContainer function).
-
if the item is not in a grouping we ignore it since it can't be dragged with this
-
script.
-
*/
-
var
dragObj = target.
getAttribute
(
'DragObj'
)
;
-
-
// if the mouse was moved over an element that is draggable
-
if
(
dragObj!=
null
)
{
-
-
// mouseOver event - Change the item's class if necessary
-
if
(
target!=lastTarget
)
{
-
var
oClass = target.
getAttribute
(
'overClass'
)
;
-
if
(
oClass
)
{
-
target.
setAttribute
(
'origClass'
, target.
className
)
;
-
target.
className
= oClass;
-
}
-
}
-
-
// if the user is just starting to drag the element
-
if
(
iMouseDown && !lMouseState
)
{
-
// mouseDown target
-
curTarget = target;
-
-
// Record the mouse x and y offset for the element
-
rootParent = curTarget.
parentNode
;
-
rootSibling = curTarget.
nextSibling
;
-
-
mouseOffset = getMouseOffset
(
target, ev
)
;
-
-
// We remove anything that is in our dragHelper DIV so we can put a new item in it.
-
for
(
var
i=
0
; i<dragHelper.
childNodes
.
length
; i++
)
dragHelper.
removeChild
(
dragHelper.
childNodes
[
i
]
)
;
-
-
// Make a copy of the current item and put it in our drag helper.
-
dragHelper.
appendChild
(
curTarget.
cloneNode
(
true
)
)
;
-
dragHelper.
style
.
display
=
'block'
;
-
-
// set the class on our helper DIV if necessary
-
var
dragClass = curTarget.
getAttribute
(
'dragClass'
)
;
-
if
(
dragClass
)
{
-
dragHelper.
firstChild
.
className
= dragClass;
-
}
-
-
// disable dragging from our helper DIV (it's already being dragged)
-
dragHelper.
firstChild
.
removeAttribute
(
'DragObj'
)
;
-
-
/*
-
Record the current position of all drag/drop targets related
-
to the element. We do this here so that we do not have to do
-
it on the general mouse move event which fires when the mouse
-
moves even 1 pixel. If we don't do this here the script
-
would run much slower.
-
*/
-
var
dragConts = DragDrops
[
dragObj
]
;
-
-
/*
-
first record the width/height of our drag item. Then hide it since
-
it is going to (potentially) be moved out of its parent.
-
*/
-
curTarget.
setAttribute
(
'startWidth'
, parseInt
(
curTarget.
offsetWidth
)
)
;
-
curTarget.
setAttribute
(
'startHeight'
, parseInt
(
curTarget.
offsetHeight
)
)
;
-
curTarget.
style
.
display
=
'none'
;
-
-
// loop through each possible drop container
-
for
(
var
i=
0
; i<dragConts.
length
; i++
)
{
-
with
(
dragConts
[
i
]
)
{
-
var
pos = getPosition
(
dragConts
[
i
]
)
;
-
-
/*
-
save the width, height and position of each container.
-
-
Even though we are saving the width and height of each
-
container back to the container this is much faster because
-
we are saving the number and do not have to run through
-
any calculations again. Also, offsetHeight and offsetWidth
-
are both fairly slow. You would never normally notice any
-
performance hit from these two functions but our code is
-
going to be running hundreds of times each second so every
-
little bit helps!
-
-
Note that the biggest performance gain here, by far, comes
-
from not having to run through the getPosition function
-
hundreds of times.
-
*/
-
setAttribute
(
'startWidth'
, parseInt
(
offsetWidth
)
)
;
-
setAttribute
(
'startHeight'
, parseInt
(
offsetHeight
)
)
;
-
setAttribute
(
'startLeft'
, pos.
x
)
;
-
setAttribute
(
'startTop'
, pos.
y
)
;
-
}
-
-
// loop through each child element of each container
-
for
(
var
j=
0
; j<dragConts
[
i
]
.
childNodes
.
length
; j++
)
{
-
with
(
dragConts
[
i
]
.
childNodes
[
j
]
)
{
-
if
(
(
nodeName==
'#text'
)
||
(
dragConts
[
i
]
.
childNodes
[
j
]
==curTarget
)
)
continue
;
-
-
var
pos = getPosition
(
dragConts
[
i
]
.
childNodes
[
j
]
)
;
-
-
// save the width, height and position of each element
-
setAttribute
(
'startWidth'
, parseInt
(
offsetWidth
)
)
;
-
setAttribute
(
'startHeight'
, parseInt
(
offsetHeight
)
)
;
-
setAttribute
(
'startLeft'
, pos.
x
)
;
-
setAttribute
(
'startTop'
, pos.
y
)
;
-
}
-
}
-
}
-
}
-
}
-
-
// If we get in here we are dragging something
-
if
(
curTarget
)
{
-
// move our helper div to wherever the mouse is (adjusted by mouseOffset)
-
dragHelper.
style
.
top
= mousePos.
y
- mouseOffset.
y
;
-
dragHelper.
style
.
left
= mousePos.
x
- mouseOffset.
x
;
-
-
var
dragConts = DragDrops
[
curTarget.
getAttribute
(
'DragObj'
)
]
;
-
var
activeCont =
null
;
-
-
var
xPos = mousePos.
x
- mouseOffset.
x
+
(
parseInt
(
curTarget.
getAttribute
(
'startWidth'
)
)
/
2
)
;
-
var
yPos = mousePos.
y
- mouseOffset.
y
+
(
parseInt
(
curTarget.
getAttribute
(
'startHeight'
)
)
/
2
)
;
-
-
// check each drop container to see if our target object is "inside" the container
-
for
(
var
i=
0
; i<dragConts.
length
; i++
)
{
-
with
(
dragConts
[
i
]
)
{
-
if
(
(
(
getAttribute
(
'startLeft'
)
)
< xPos
)
&&
-
(
(
getAttribute
(
'startTop'
)
)
< yPos
)
&&
-
(
(
getAttribute
(
'startLeft'
)
+ getAttribute
(
'startWidth'
)
)
> xPos
)
&&
-
(
(
getAttribute
(
'startTop'
)
+ getAttribute
(
'startHeight'
)
)
> yPos
)
)
{
-
-
/*
-
our target is inside of our container so save the container into
-
the activeCont variable and then exit the loop since we no longer
-
need to check the rest of the containers
-
*/
-
activeCont = dragConts
[
i
]
;
-
-
// exit the for loop
-
break
;
-
}
-
}
-
}
-
-
// Our target object is in one of our containers. Check to see where our div belongs
-
if
(
activeCont
)
{
-
// beforeNode will hold the first node AFTER where our div belongs
-
var
beforeNode =
null
;
-
-
// loop through each child node (skipping text nodes).
-
for
(
var
i=activeCont.
childNodes
.
length
-1
; i>=
0
; i--
)
{
-
with
(
activeCont.
childNodes
[
i
]
)
{
-
if
(
nodeName==
'#text'
)
continue
;
-
-
// if the current item is "After" the item being dragged
-
if
(
-
curTarget != activeCont.
childNodes
[
i
]
&&
-
(
(
getAttribute
(
'startLeft'
)
+ getAttribute
(
'startWidth'
)
)
> xPos
)
&&
-
(
(
getAttribute
(
'startTop'
)
+ getAttribute
(
'startHeight'
)
)
> yPos
)
)
{
-
beforeNode = activeCont.
childNodes
[
i
]
;
-
}
-
}
-
}
-
-
// the item being dragged belongs before another item
-
if
(
beforeNode
)
{
-
if
(
beforeNode!=curTarget.
nextSibling
)
{
-
activeCont.
insertBefore
(
curTarget, beforeNode
)
;
-
}
-
-
// the item being dragged belongs at the end of the current container
-
}
else
{
-
if
(
(
curTarget.
nextSibling
)
||
(
curTarget.
parentNode
!=activeCont
)
)
{
-
activeCont.
appendChild
(
curTarget
)
;
-
}
-
}
-
-
// make our drag item visible
-
if
(
curTarget.
style
.
display
!=
''
)
{
-
curTarget.
style
.
display
=
''
;
-
}
-
}
else
{
-
-
// our drag item is not in a container, so hide it.
-
if
(
curTarget.
style
.
display
!=
'none'
)
{
-
curTarget.
style
.
display
=
'none'
;
-
}
-
}
-
}
-
-
// track the current mouse state so we can compare against it next time
-
lMouseState = iMouseDown;
-
-
// mouseMove target
-
lastTarget = target;
-
-
// track the current mouse state so we can compare against it next time
-
lMouseState = iMouseDown;
-
-
// this helps prevent items on the page from being highlighted while dragging
-
return
false
;
-
}
-
-
function
mouseUp
(
ev
)
{
-
if
(
curTarget
)
{
-
// hide our helper object - it is no longer needed
-
dragHelper.
style
.
display
=
'none'
;
-
-
// if the drag item is invisible put it back where it was before moving it
-
if
(
curTarget.
style
.
display
==
'none'
)
{
-
if
(
rootSibling
)
{
-
rootParent.
insertBefore
(
curTarget, rootSibling
)
;
-
}
else
{
-
rootParent.
appendChild
(
curTarget
)
;
-
}
-
}
-
-
// make sure the drag item is visible
-
curTarget.
style
.
display
=
''
;
-
}
-
curTarget =
null
;
-
iMouseDown =
false
;
-
}
-
-
function
mouseDown
(
)
{
-
iMouseDown =
true
;
-
if
(
lastTarget
)
{
-
return
false
;
-
}
-
}
-
-
document.
onmousemove
= mouseMove;
-
document.
onmousedown
= mouseDown;
-
document.
onmouseup
= mouseUp;
-
-
window.
onload
=
function
(
)
{
-
// Create our helper object that will show the item while dragging
-
dragHelper = document.
createElement
(
'DIV'
)
;
-
dragHelper.
style
.
cssText
=
'position:absolute;display:none;'
;
-
-
CreateDragContainer
(
-
document.
getElementById
(
'DragContainer1'
)
,
-
document.
getElementById
(
'DragContainer2'
)
,
-
document.
getElementById
(
'DragContainer3'
)
-
)
;
-
-
document.
body
.
appendChild
(
dragHelper
)
;
-
}
-
-
<!--the mouse over and dragging
class
are defined on each item-->
-
-
<div
class
=
"DragContainer"
id=
"DragContainer1"
>
-
<div
class
=
"DragBox"
id=
"Item1"
overClass=
"OverDragBox"
dragClass=
"DragDragBox"
>Item #
1
</div>
-
<div
class
=
"DragBox"
id=
"Item2"
overClass=
"OverDragBox"
dragClass=
"DragDragBox"
>Item #
2
</div>
-
<div
class
=
"DragBox"
id=
"Item3"
overClass=
"OverDragBox"
dragClass=
"DragDragBox"
>Item #
3
</div>
-
<div
class
=
"DragBox"
id=
"Item4"
overClass=
"OverDragBox"
dragClass=
"DragDragBox"
>Item #
4
</div>
-
</div>
-
<div
class
=
"DragContainer"
id=
"DragContainer2"
>
-
<div
class
=
"DragBox"
id=
"Item5"
overClass=
"OverDragBox"
dragClass=
"DragDragBox"
>Item #
5
</div>
-
<div
class
=
"DragBox"
id=
"Item6"
overClass=
"OverDragBox"
dragClass=
"DragDragBox"
>Item #
6
</div>
-
<div
class
=
"DragBox"
id=
"Item7"
overClass=
"OverDragBox"
dragClass=
"DragDragBox"
>Item #
7
</div>
-
<div
class
=
"DragBox"
id=
"Item8"
overClass=
"OverDragBox"
dragClass=
"DragDragBox"
>Item #
8
</div>
-
</div>
-
<div
class
=
"DragContainer"
id=
"DragContainer3"
>
-
<div
class
=
"DragBox"
id=
"Item9"
overClass=
"OverDragBox"
dragClass=
"DragDragBox"
>Item #
9
</div>
-
<div
class
=
"DragBox"
id=
"Item10"
overClass=
"OverDragBox"
dragClass=
"DragDragBox"
>Item #
10
</div>
-
<div
class
=
"DragBox"
id=
"Item11"
overClass=
"OverDragBox"
dragClass=
"DragDragBox"
>Item #
11
</div>
-
<div
class
=
"DragBox"
id=
"Item12"
overClass=
"OverDragBox"
dragClass=
"DragDragBox"
>Item #
12
</div>
-
</div>
-
你现在拥有了拖拽的所有东西．
下面的三个demo是记录事件历史．当你的鼠标在item上移动，将记录所生的事件，如果你不明白可以尝试一下鼠标的划过或者拖动，看有什么发生．
--------------------------------------------------------------
点此查看示例六
--------------------------------------------------------------
这是一篇翻译文章，原文地址：
http://www.webreference.com/programming/javascript/mk/column2/index.html
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
