怎么用 javascript 实现拖拽

gaojiewyh

浏览: 762420 次
性别:
来自: 深圳

最近访客更多访客>>

whzresponse

zhilidali

baihui0648

cshui

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript Firefox 浏览器脚本 J#

在网页上实现拖拽其实不难，第一我们需要知道鼠标的位置，第二我们需要知道当用户点击一个网页元素时这个元素要能够拖拽。

--------------------------------------------------------------
点此查看示例一
--------------------------------------------------------------

获取鼠标移动信息

开始我们需要获取鼠标的坐标．我们添加一个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(dragContscolor: #

  


  
    
    分享到：
      
      
    
  

  
    
      byte和String之间的转化
      |
      zk如何调用本地javascript代码向服务器端发 ...
    
  
  
    
      2009-06-11 21:18
      浏览 2181
      评论(0)
      
      
            
      查看更多
        
  
    
  
    评论
    
    
    
    
  

  
    发表评论
               您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论