[翻译] 如何在 JavaScript 中实现拖放(下)
发布日期:2021-10-01 08:44:53 浏览次数:25 分类:技术文章

本文共 5324 字,大约阅读时间需要 17 分钟。

    译者:
    终于完成了全文的翻译,由于时间比较参促,文章没有过多的校正与润色,阅读过程中难免会有些许生硬或不准确的感觉,请大家见量并指出,方便他人阅读。
    原文作者将拖放功能的实现分步讲解,其核心的地方在于移动和放置元素时,鼠标、移动元素、目标元素关系的处理,只要这个问题处理好了,代码就很容易理解,译文仅供辅助参考之用。
    整合所有的功能
    最后我们使用所有代码片断,来创建一个完整的拖放函数脚本。我们所要做的第一件事情是DOM操作,如果你对此并不十分熟悉,可以阅读《
》。
    接下来的代码创建容器和容器组,使得在这些容器中可以拖动每个元素,这在本文第二个demo的基础上来完成。这段代码能够用来重新规划元素的顺序,将导航窗口放在页面的左侧或右侧,或再加入你所能想到的其他的功能。
    我们将使用伪代码来一步步进行讲解,将真实的代码通过注释的方式留给读者查看。
    1.当文档第一次被加载时,我们创建一个名为dragHelper的DIV标签,当我们开始移动一个元素的时候,dragHelper将成为一个隐藏元素,可以四处移动。真实的元素并不会被拖动,仅仅使用insertBefore和appendChild来移动。我们在开始的时候隐藏dragHelper。
    2.我们创建mouseDown和mouseUp函数。起初,所有的这些函数都假设记录了鼠标按钮的状态,以至于iMouseDown变量在鼠标按下的时候为true,没有按下的时候为false。
    3.我们创建一个全局变量DragDrops,以及一个函数CreateDragContainer。DragDrops包含一组相互关联的容器。传入CreateDragContainer的任何变量(代表容器)被组织成一个新的集合,使元素能够在这些容器间自由移动。通过setAttribute,CreateDragContainer函数同样将各容器中的元素绑定在一起。
    4.现在我们的代码知道每个元素所在的集合,现在来看mouseMove函数。mouseMove函数首先设置了一个变量target,表示鼠标下面的目标元素,如果这个元素在集合(用getAttribute判断)中就继续下面操作:
    4.1.首先,在必要的时候,我们运行一个简单的脚本来改变目标元素的class属性,这样就创造了一个翻动的效果。
    4.2.然后我们检查鼠标是否点击(因为我们的代码已经运行到这里),如果事件发生:
    4.2.1.设置变量curTarget为当前元素。
    4.2.2.记录元素当前在文档中的位置,以便在需要的时候可以将它的值取回。
    4.2.3.将当前元素克隆到dragHelper,使得我们能够移动元素的隐藏备份。
    4.2.4.因为在dragHelper中我们完全拥有了拖动元素的一个备份,这个元素会始终在鼠标下,我们必须移除dragObj属性,让代码知道dragObj已不在集合中。
    4.2.5.我们快速记录集合中每个元素当前的位置、宽度和高度。当元素第一次开始被拖动时,我们仅需做一次这种工作,否则每当鼠标移动的时候我们都必须做一次,甚至一秒内几百次。
    4.3.如果鼠标没有点击,要么我们和之前拥有同样的目标元素,要么没有目标元素,不论哪种情况我们都不会做任何事情。
    5.现在我们检查curTarget变量。curTarget应该仅包含一个被拖动的对象,因此如果它存在,表示我们正在拖动一个元素:
    5.1.移动隐藏DIV到鼠标,这个元素和文章前面所创建的元素一样能够被拖动。
    5.2.然后我们检查鼠标是否存在于当前集合中每个容器中。
    5.2.1.如果鼠标在某个容器中,我们检查容器中的每个元素,查看我们正拖动的元素属于哪个位置。
    5.2.2.然后我们将所拖动的元素放置在容器中另一个元素的前面,或容器的最后位置。
    5.2.3.最后我们确定元素可见。
    6.剩下的事情就是捕获mouseUp事件:
    6.1.首先需要隐藏dragHelper:它不再被需要,因为我们没有拖动任何东西。
    6.2.如果拖动的元素是可见的,它已经存在于任何它所属的容器中,所有工作已完成。
    6.3.如果拖动的元素不可见,我们将它放回它原来所在的地方。
None.gif//  iMouseDown represents the current mouse button state: up or down
ExpandedBlockStart.gifContractedBlock.gif
/**/ /**/ /**/
/*
InBlock.giflMouseState represents the previous mouse button state so that we can
InBlock.gifcheck for button clicks and button releases:
InBlock.gif
InBlock.gifif(iMouseDown && !lMouseState) // button just clicked!
InBlock.gifif(!iMouseDown && lMouseState) // button just released!
ExpandedBlockEnd.gif
*/
None.gif
var  mouseOffset  =   null
;
None.gif
var  iMouseDown   =   false
;
None.gif
var  lMouseState  =   false
;
None.gif
var  dragObject   =   null
;
None.gif
None.gif
//  Demo 0 variables
None.gif
var  DragDrops    =
 [];
None.gif
var  curTarget    =   null
;
None.gif
var  lastTarget   =   null
;
None.gif
var  dragHelper   =   null
;
None.gif
var  tempDiv      =   null
;
None.gif
var  rootParent   =   null
;
None.gif
var  rootSibling  =   null
;
None.gif
ExpandedBlockStart.gifContractedBlock.gifNumber.prototype.NaN0
= function () dot.gif {
return  isNaN( this ) ? 0 : this ;}
None.gif
ExpandedBlockStart.gifContractedBlock.gif
function  CreateDragContainer() dot.gif
{
ExpandedSubBlockStart.gifContractedSubBlock.gif  
/**/ /**/ /**/
/*
InBlock.gif  Create a new "Container Instance" so that items from one "Set" can not
InBlock.gif  be dragged into items from another "Set"
ExpandedSubBlockEnd.gif  
*/
InBlock.gif  
var  cDrag  =  DragDrops.length;
InBlock.gif  DragDrops[cDrag] 
=
 [];
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif  
/**/ /**/ /**/
/*
InBlock.gif  Each item passed to this function should be a "container".  Store each
InBlock.gif  of these items in our current container
ExpandedSubBlockEnd.gif  
*/
ExpandedSubBlockStart.gifContractedSubBlock.gif  
for ( var  i = 0 ; i < arguments.length; i ++ ) dot.gif {
InBlock.gif    
var  cObj  =
 arguments[i];
InBlock.gif    DragDrops[cDrag].push(cObj);
InBlock.gif    cObj.setAttribute('DropObj', cDrag);
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif    
/**/ /**/ /**/
/*
InBlock.gif    Every top level item in these containers should be draggable.  Do this
InBlock.gif    by setting the DragObj attribute on each item and then later checking
InBlock.gif    this attribute in the mouseMove function
ExpandedSubBlockEnd.gif    
*/
ExpandedSubBlockStart.gifContractedSubBlock.gif    
for ( var  j = 0 ; j < cObj.childNodes.length; j ++ ) dot.gif {
InBlock.gif
InBlock.gif      
//  Firefox puts in lots of #text nodesskip these
InBlock.gif
       if (cObj.childNodes[j].nodeName == '#text')  continue ;
InBlock.gif
InBlock.gif      cObj.childNodes[j].setAttribute('DragObj', cDrag);
ExpandedSubBlockEnd.gif    }
ExpandedSubBlockEnd.gif  }
ExpandedBlockEnd.gif}
None.gif
ExpandedBlockStart.gifContractedBlock.gif
function  mouseMove(ev) dot.gif
{
InBlock.gif    ev 
=  ev  ||
 window.event;
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif    
/**/ /**/ /**/
/*
InBlock.gif    We are setting target to whatever item the mouse is currently on
InBlock.gif    Firefox uses event.target here, MSIE uses event.srcElement
ExpandedSubBlockEnd.gif    
*/
InBlock.gif    
var  target  =  ev.target  ||  ev.srcElement;
InBlock.gif    
var  mousePos  =
 mouseCoords(ev);
InBlock.gif
InBlock.gif    
//  mouseOut event - fires if the item the mouse is on has changed
ExpandedSubBlockStart.gifContractedSubBlock.gif
     if (lastTarget  &&  (target !== lastTarget)) dot.gif {
InBlock.gif      
//  reset the classname for the target element
InBlock.gif
       var  origClass  =  lastTarget.getAttribute('origClass');
InBlock.gif      
if (origClass) lastTarget.className  =
 origClass;
ExpandedSubBlockEnd.gif    }
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif    
/**/ /**/ /**/ /*
InBlock.gif    dragObj is the grouping our item is in (set from the createDragContainer function).
InBlock.gif    if the item is not in a grouping we ignore it since it can't be dragged with this
InBlock.gif    script.
ExpandedSubBlockEnd.gif    
*/
InBlock.gif    
var  dragObj  =  target.getAttribute('DragObj');
InBlock.gif
InBlock.gif    
//  if the mouse was moved over an element that is draggable
ExpandedSubBlockStart.gifContractedSubBlock.gif
     if (dragObj != null ) dot.gif {
InBlock.gif      
//  mouseOver event - Change the item's class if necessary
ExpandedSubBlockStart.gifContractedSubBlock.gif
       if (target != lastTarget) dot.gif {
InBlock.gif        
var  oClass  =
 target.getAttribute('overClass');
ExpandedSubBlockStart.gifContractedSubBlock.gif        
if (oClass) dot.gif
{
InBlock.gif          target.setAttribute('origClass', target.className);
InBlock.gif          target.className 
=
 oClass;
ExpandedSubBlockEnd.gif        }
ExpandedSubBlockEnd.gif      }
InBlock.gif
InBlock.gif      
//  if the user is just starting to drag the element
ExpandedSubBlockStart.gifContractedSubBlock.gif
       if (iMouseDown  &&   ! lMouseState) dot.gif {
InBlock.gif        
//  mouseDown target
InBlock.gif
        curTarget  =  target;
InBlock.gif
InBlock.gif        
//  Record the mouse x and y offset for the element
InBlock.gif
        rootParent  =  curTarget.parentNode;
InBlock.gif        rootSibling 
=
 curTarget.nextSibling;
InBlock.gif
InBlock.gif        mouseOffset   
=
 getMouseOffset(target, ev);
InBlock.gif
InBlock.gif        
//  We remove anything that is in our dragHelper DIV so we can put a new item in it.
InBlock.gif
         for ( var  i = 0 ; i < dragHelper.childNodes.length; i ++ ) dragHelper.removeChild(dragHelper.childNodes[i]);
InBlock.gif
InBlock.gif        
//  Make a copy of the current item and put it in our drag helper.
InBlock.gif
        dragHelper.appendChild(curTarget.cloneNode( true ));
InBlock.gif        dragHelper.style.display 
=
 'block';
InBlock.gif
InBlock.gif        
//  set the class on our helper DIV if necessary
InBlock.gif
         var  dragClass  =  curTarget.getAttribute('dragClass');
ExpandedSubBlockStart.gifContractedSubBlock.gif        
if (dragClass) dot.gif
{
InBlock.gif          dragHelper.firstChild.className 
=
 dragClass;
ExpandedSubBlockEnd.gif        }
InBlock.gif
InBlock.gif        
//  disable dragging from our helper DIV (it's already being dragged)
InBlock.gif
        dragHelper.firstChild.removeAttribute('DragObj');
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif        
/**/ /**/ /**/
/* </sp>

转载地址:https://blog.csdn.net/iteye_263/article/details/81402213 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:[翻译] 如何在 JavaScript 中实现拖放
下一篇:[翻译] 如何在 JavaScript 中实现拖放(中)

发表评论

最新留言

做的很好,不错不错
[***.243.131.199]2024年03月15日 11时35分53秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

c#背单词小程序视频_C#用timer实现背单词小程序 2019-04-21
24v开关电源维修技巧_【电视技术】液晶电视电源板十个维修经验分享 2019-04-21
laravel comment显示到页面最上面了_使用 Laravel 快速开发API接口,新手必读 2019-04-21
mysql无法写数据库_求助,为何我的数据不能写入数据库 2019-04-21
mysql 双向链表_23张图!万字详解「链表」,从小白到大佬! 2019-04-21
如何打开git命令窗口_win10系统如何将右键菜单中“在此处打开powershell窗口”调整为“在此处打开命令窗口”?... 2019-04-21
php正则过滤sql关键字,使用正则表达式屏蔽关键字的方法 2019-04-21
php取整v,php取整方式分享 2019-04-21
php写模糊搜索api接口,php通过sphinxapi接口实现全文搜索 2019-04-21
oracle安装出现2932,【案例】Oracle报错ORA-19815 fast_recovery_area无剩余空间解决办法... 2019-04-21
rac数据库下oracle打小补丁,Oracle 11g RAC 环境打PSU补丁的详细步骤 2019-04-21
form表单属性名相同java_form表单提交时候有多个相同name 的input如何处理? 2019-04-21
java图片加气泡文字_图片加气泡文字 2019-04-21
java总结i o流_14.java总结I/O流 2019-04-21
java和历转为西历_日期转西暦,和暦 2019-04-21
java 远程 yarn jar_再论Yarn Client和Yarn cluster 2019-04-21
java单元测试断言_单元测试+断言 2019-04-21
java 创建压缩包_用Java创建ZIP压缩文件 2019-04-21
java typedarray_TintTypedArray.java 2019-04-21
java字符字面量_java – 字符串字面量的行为是令人困惑的 2019-04-21