怎么用javascript进行拖拽2

      2019-10-20 09:21      编程语言

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
你会注意到这个代码几乎是前面的全集,将前面的合在一起就实现了拖拽效果了.

当我们点击一个item时,我们就获取了很多变量,如鼠标位置,鼠标位置自然就包含了那个item的坐标信息了.如果我们点击了一个20*20px图像的正中间,那么鼠标的相对坐标为{x:10,y:10}.当我们点击这个图像的左上角那么鼠标的相对坐标为{x:0,y:0}.当我们点击时,我们用这个方法取得一些鼠标与图片校对的信息.如果我们不能加载页面item,那么信息将是document信息,会忽略了点击的item信息.

mouseOffset函数使用了另一个函数getPosition.getPosition的作用是返回item相对页面左上角的坐标,如果我们尝试获取item.offsetLeft或者item.style.left,那么我们将取得item相对与父级的位置,不是整个document.所有的脚本我们都是相对整个document,这样会更好一些.

为了完成getPosition任务,必须循环取得item的父级,我们将加载内容到item的左/上的位置.我们需要管理想要的top与left列表.

自从定义了mousemove这个函数,mouseMove就会一直运行.第一我们确定item的style.position为absolute,第二我们移动item到前面定义好的位置.当mouse点击被释放,dragObject被设置为null,mouseMove将不在做任何事.

DroppinganItem

前面的例子目的很简单,就是拖拽item到我们希望到的地方.我们经常还有其他目的如删除item,比如我们可以将item拖到垃圾桶里,或者其他页面定义的位置.

很不幸,我们有一个很大的难题,当我们拖拽,item会在鼠标之下,比如mouseove,mousedown,mouseup或者其他mouseaction.如果我们拖拽一个item到垃圾桶上,鼠标信息还在item上,不在垃圾桶上.

怎么解决这个问题呢?有几个方法可以来解决.第一,这是以前比较推荐的,我们在移动鼠标时item会跟随鼠标,并占用了mouseover/mousemove等鼠标事件,我们不这样做,只是让item跟随着鼠标,并不占用mouseover等鼠标事件,这样会解决问题,但是这样并不好看,我们还是希望item能直接跟在mouse下.

另一个选择是不做item的拖拽.你可以改变鼠标指针来显示需要拖拽的item,然后放在鼠标释放的位置.这个解决方案,也是因为美学原因不予接受.

最后的解决方案是,我们并不去除拖拽效果.这种方法比前两种繁杂许多,我们需要定义我们需要释放目标的列表,当鼠标释放时,手工去检查释放的位置是否是在目标列表位置上,如果在,说明是释放在目标位置上了.
复制代码 代码如下:
/*
Allcodefromthepreviousexampleisneededwiththeexception
ofthemouseUpfunctionwhichisreplacedbelow
*/

vardropTargets=[];

functionaddDropTarget(dropTarget){
dropTargets.push(dropTarget);
}

functionmouseUp(ev){
ev=ev||window.event;
varmousePos=mouseCoords(ev);

for(vari=0;i<dropTargets.length;i++){
varcurTarget=dropTargets[i];
vartargPos=getPosition(curTarget);
vartargWidth=parseInt(curTarget.offsetWidth);
vartargHeight=parseInt(curTarget.offsetHeight);

if(
(mousePos.x>targPos.x)&&

(mousePos.x<(targPos.x+targWidth))&&
(mousePos.y>targPos.y)&&
(mousePos.y<(targPos.y+targHeight))){
//dragObjectwasdroppedontocurTarget!
}
}

dragObject=null;
}



[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

鼠标释放时会去取是否有drop属性,如果存在,同时鼠标指针还在drop的范围内,执行drop操作.我们检查鼠标指针位置是否在目标范围是用(mousePos.x>targetPos.x),而且还要符合条件(mousePos.x<(targPos.x+targWidth)).如果所有的条件符合,说明指针确实在范围内,可以执行drop指令了.

PullingItAllTogether

最后我们拥有了所有的drag/drop的脚本片断!下一个事情是我们将创建一个DOM处理.如果你不是很熟悉,请先阅读我的JavaScriptPrimeronDOMManipulation.

下面的代码将创建container(容器),而且使任何一个需要drag/drop的item变成一个容器的item.代码在这个文章第二个demo的后面,它可以用户记录一个list(列表),定为一个导航窗口在左边或者右边,或者更多的函数你可以想到的.

下一步我们将通过"假代码"让reader看到真代码,下面为推荐:

1、当document第一次载入时,创建dragHelperDIV.dragHelper将给移动的item加阴影.真实的item没有被dragged,只是用了insertBefor和appendChild来移动了,我们隐藏了dragHelper

2、有了mouseDown与mouseUp函数.所有的操作会对应到当到iMouseDown的状态中,只有当mouse左键为按下时iMouseDown才为真,否则为假.

3、我们创建了全局变量DragDrops与全局函数CreateDragContainer.DragDrops包含了一系列相对彼此的容器.任何参数(containers)将通过CreatedcragContainer进行重组与序列化,这样可以自由的移动.CreateDragContainer函数也将item进行绑定与设置属性.

4、现在我们的代码知道每个item的加入,当我们移动处mouseMove,mouseMove函数首先会设置变量target,鼠标移动在上面的item,如果这个item在容器中(checkedwithgetAttribute):

运行一小段代码来改变目标的样式.创造rollover效果
检查鼠标是否没有放开,如果没有
设置curTarget代表当前item
记录item的当前位置,如果需要的话,我们可以将它返回
克隆当前的item到dragHelper中,我们可以移动带阴影效果的item.
item拷贝到dragHelper后,原有的item还在鼠标指针下,我们必须删除掉dragObj,这样脚本起作用,dragObj被包含在一个容器中.
抓取容器中所有的item当前坐标,高度/宽度,这样只需要记录一次,当item被drag时,每随mouse移动,每移钟就会记录成千上万次.
如果没有,不需要做任何事,因为这不是一个需要移动的item
5、检查curTarget,它应该包含一个被移动的item,如果存在,进行下面操作:

开始移动带有阴影的item,这个item就是前文所创建的
检查每个当前容器中的container,是否鼠标已经移动到这些范围内了
我们检查看一下正在拖动的item是属于哪个container
放置item在一个container的某一个item之前,或者整个container之后
确认item是可见的
如果鼠标不在container中,确认item是不可见了.
6、剩下的事就是捕捉mouseUp的事件了

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]