怎么用javascript进行拖拽2_javascript技巧-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

怎么用javascript进行拖拽2_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:28 PM

<base href="http://www.blueidea.com">
<script> 
var iMouseDown  = false; 
var dragObject  = null; 
var curTarget   = null;

function makeDraggable(item){ 
    if(!item) return; 
    item.onmousedown = function(ev){ 
        dragObject  = this; 
        mouseOffset = getMouseOffset(this, ev); 
        return false; 
    } 
}

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 + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); 
        top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); 
        e     = e.offsetParent; 
    }

left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); 
    top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

return {x:left, y:top};

}

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 
    }; 
}

function mouseDown(ev){ 
    ev         = ev || window.event; 
    var target = ev.target || ev.srcElement;

if(target.onmousedown || target.getAttribute('DragObj')){ 
        return false; 
    } 
}

function mouseUp(ev){

dragObject = null;

iMouseDown = false; 
}

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);

if(dragObject){ 
        dragObject.style.position = 'absolute'; 
        dragObject.style.top      = mousePos.y - mouseOffset.y; 
        dragObject.style.left     = mousePos.x - mouseOffset.x; 
    }

// track the current mouse state so we can compare against it next time 
    lMouseState = iMouseDown;

// this prevents items on the page from being highlighted while dragging 
    if(curTarget || dragObject) return false; 
}

document.onmousemove = mouseMove; 
document.onmousedown = mouseDown; 
document.onmouseup   = mouseUp;

window.onload = function() { 
    makeDraggable(document.getElementById('DragImage5')); 
    makeDraggable(document.getElementById('DragImage6')); 
    makeDraggable(document.getElementById('DragImage7')); 
    makeDraggable(document.getElementById('DragImage8')); 
} 
</script>

<fieldset id="Demo5" style="HEIGHT: 70px">
<h3>Demo - Drag any of the  
images</h3>
<img  src="/static/imghwm/default1.png" data-src="/articleimg/2006/07/3791/drag_drop_spade.gif" class="lazy" id="DragImage5" alt="怎么用javascript进行拖拽2_javascript技巧" ><img  src="/static/imghwm/default1.png" data-src="/articleimg/2006/07/3791/drag_drop_heart.gif" class="lazy" id="DragImage6" alt="怎么用javascript进行拖拽2_javascript技巧" ><img  src="/static/imghwm/default1.png" data-src="/articleimg/2006/07/3791/drag_drop_diamond.gif" class="lazy" id="DragImage7" alt="怎么用javascript进行拖拽2_javascript技巧" ><img  src="/static/imghwm/default1.png" data-src="/articleimg/2006/07/3791/drag_drop_club.gif" class="lazy" id="DragImage8" alt="怎么用javascript进行拖拽2_javascript技巧" > </fieldset>

[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将不在做任何事．

Dropping an Item

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

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

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

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

最后的解决方案是，我们并不去除拖拽效果．这种方法比前两种繁杂许多，我们需要定义我们需要释放目标的列表，当鼠标释放时，手工去检查释放的位置是否是在目标列表位置上，如果在，说明是释放在目标位置上了．

复制代码代码如下:

/* 
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  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    (mousePos.y > targPos.y)                && 
   (mousePos.y     // dragObject was dropped onto curTarget! 
  } 
 } 

 dragObject   = null; 
} 

<base href="http://www.blueidea.com">
<script> 
var iMouseDown  = false; 
var dragObject  = null; 
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

// Demo 0 variables 
var DragDrops   = []; 
var curTarget   = null; 
var lastTarget  = 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}; 
}

left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); 
    top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

return {x:left, y:top};

}

function mouseDown(ev){ 
    ev         = ev || window.event; 
    var target = ev.target || ev.srcElement;

if(target.onmousedown || target.getAttribute('DragObj')){ 
        return false; 
    } 
}

function mouseUp(ev){

//dragObject = null;

if(dragObject){ 
        ev           = ev || window.event; 
        var mousePos = mouseCoords(ev);

iMouseDown = false; 
}

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);

// track the current mouse state so we can compare against it next time 
    lMouseState = iMouseDown;

// this prevents items on the page from being highlighted while dragging 
    if(curTarget || dragObject) return false; 
}

function addDropTarget(item, target){ 
    item.setAttribute('droptarget', target); 
}

document.onmousemove = mouseMove; 
document.onmousedown = mouseDown; 
document.onmouseup   = mouseUp;

window.onload = function (){ 
    makeDraggable(document.getElementById('DragImage9')); 
    makeDraggable(document.getElementById('DragImage10')); 
    makeDraggable(document.getElementById('DragImage11')); 
    makeDraggable(document.getElementById('DragImage12'));

addDropTarget(document.getElementById('DragImage9'),  'TrashImage1'); 
    addDropTarget(document.getElementById('DragImage10'), 'TrashImage1'); 
    addDropTarget(document.getElementById('DragImage11'), 'TrashImage1'); 
    addDropTarget(document.getElementById('DragImage12'), 'TrashImage1'); 
} 
</script>

<fieldset id="Demo6" style="HEIGHT: 70px">
<h3>Demo - Drag any image onto the  
trashcan</h3>
<img  src="/static/imghwm/default1.png" data-src="/articleimg/2006/07/3791/drag_drop_trash.gif" class="lazy" id="TrashImage1" timeout="600" new alt="怎么用javascript进行拖拽2_javascript技巧" >        
<img  src="/static/imghwm/default1.png" data-src="/articleimg/2006/07/3791/drag_drop_spade.gif" class="lazy" id="DragImage9" alt="怎么用javascript进行拖拽2_javascript技巧" > 
<img  src="/static/imghwm/default1.png" data-src="/articleimg/2006/07/3791/drag_drop_heart.gif" class="lazy" id="DragImage10" alt="怎么用javascript进行拖拽2_javascript技巧" > 
<img  src="/static/imghwm/default1.png" data-src="/articleimg/2006/07/3791/drag_drop_diamond.gif" class="lazy" id="DragImage11" alt="怎么用javascript进行拖拽2_javascript技巧" > 
<img  src="/static/imghwm/default1.png" data-src="/articleimg/2006/07/3791/drag_drop_club.gif" class="lazy" id="DragImage12" alt="怎么用javascript进行拖拽2_javascript技巧" >  
</fieldset>

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

鼠标释放时会去取是否有drop属性，如果存在，同时鼠标指针还在drop的范围内，执行drop操作．我们检查鼠标指针位置是否在目标范围是用(mousePos.x>targetPos.x)，而且还要符合条件(mousePos.x
Pulling It All Together

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

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

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

1、当document第一次载入时，创建dragHelper DIV.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在容器中(checked with getAttribute):

运行一小段代码来改变目标的样式．创造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的事件了

<base href="http://www.blueidea.com">
<style>LI { 
    MARGIN-BOTTOM: 10px 
} 
OL { 
    MARGIN-TOP: 5px 
} 
.DragContainer { 
    BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid 
} 
.OverDragContainer { 
    BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid 
} 
.OverDragContainer { 
    BACKGROUND-COLOR: #eee 
} 
.DragBox { 
    BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee 
} 
.OverDragBox { 
    BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee 
} 
.DragDragBox { 
    BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee 
} 
.miniDragBox { 
    BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee 
} 
.OverDragBox { 
    BACKGROUND-COLOR: #ffff99 
} 
.DragDragBox { 
    BACKGROUND-COLOR: #ffff99 
} 
.DragDragBox { 
    FILTER: alpha(opacity=50); BACKGROUND-COLOR: #ff99cc 
} 
LEGEND { 
    FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial 
} 
FIELDSET { 
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px 
} 
.History { 
    FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px 
} 
#DragContainer8 { 
    BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 1px solid; HEIGHT: 110px 
} 
.miniDragBox { 
    FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px 
} 
pre{border:1 solid #CCC;background-color:#F8F8F0;padding:10px;} 
</style>

// 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 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}; 
}

left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); 
    top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

return {x:left, y:top};

}

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); 
}

</script>

<br><input onclick="runEx('runcode69125')" type="button" value="运行代码"> <input onclick="doCopy('runcode69125')" type="button" value="复制代码"> <input onclick="doSave(runcode69125)" type="button" value="保存代码">[Ctrl+A 全选 注:<a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">如需引入外部Js需刷新才能执行</a>]</div>
<br>
<p><span><span></span></span><span>你现在拥有了拖拽的所有东西．</span></p>
<p><span></span><span>下面的三个demo是记录事件历史．当你的鼠标在item上移动，将记录所生的事件，如果你不明白可以尝试一下鼠标的划过或者拖动，看有什么发生．<br><div class="htmlarea"><textarea id="runcode91289">
<base href="http://www.blueidea.com">
<script src="/articleimg/2006/07/3791/drag_drop.js" type="text/javascript"></script> 
<style type="text/css">LI { 
    MARGIN-BOTTOM: 10px 
} 
OL { 
    MARGIN-TOP: 5px 
} 
.DragContainer { 
    BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid 
} 
.OverDragContainer { 
    BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid 
} 
.OverDragContainer { 
    BACKGROUND-COLOR: #eee 
} 
.DragBox { 
    BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee 
} 
.OverDragBox { 
    BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee 
} 
.DragDragBox { 
    BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee 
} 
.miniDragBox { 
    BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee 
} 
.OverDragBox { 
    BACKGROUND-COLOR: #ffff99 
} 
.DragDragBox { 
    BACKGROUND-COLOR: #ffff99 
} 
.DragDragBox { 
    FILTER: alpha(opacity=50); BACKGROUND-COLOR: #ff99cc 
} 
LEGEND { 
    FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial 
} 
FIELDSET { 
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px 
} 
.History { 
    FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px 
} 
#DragContainer8 { 
    BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 1px solid; HEIGHT: 110px 
} 
.miniDragBox { 
    FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px 
} 
PRE { 
    BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #f8f8f0 
} 
</style> 
 
      <fieldset id="Demo0"> 
      <h3 id="Demo-Drag-and-Drop-any-item">Demo - Drag and Drop any item</h3> 
      <div> 
      <div class="DragContainer" id="DragContainer1" overclass="OverDragContainer" history="History1"> 
      <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" overclass="OverDragContainer" history="History1"> 
      <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" overclass="OverDragContainer" history="History1"> 
      <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> 
      <fieldset>
<legend>History</legend> 
      <div class="History" id="History1"></div>
</fieldset> </div>
</fieldset>  
      <fieldset id="Demo7">
<legend>Demo - Drag and Drop any item</legend> 
      <div> 
      <ol id="DragContainer7" history="History1"> 
        <li id="ListItem1">Item #1  
        </li>
<li id="ListItem2">Item #2  
        </li>
<li id="ListItem3">Item #3  
        </li>
<li id="ListItem4">Item #4  
        </li>
<li id="ListItem5">Item #5 </li>
</ol>
</div>
</fieldset>  
      <fieldset id="Demo8"> 
      <h3 id="Demo-Drag-and-Drop-any-item">Demo - Drag and Drop any item</h3> 
      <div id="DragContainer8" history="History1"> 
      <div class="miniDragBox" id="MiniBox1">1</div> 
      <div class="miniDragBox" id="MiniBox2">2</div> 
      <div class="miniDragBox" id="MiniBox3">3</div> 
      <div class="miniDragBox" id="MiniBox4">4</div> 
      <div class="miniDragBox" id="MiniBox5">5</div> 
      <div class="miniDragBox" id="MiniBox6">6</div> 
      <div class="miniDragBox" id="MiniBox7">7</div> 
      <div class="miniDragBox" id="MiniBox8">8</div> 
      <div class="miniDragBox" id="MiniBox9">9</div> 
      <div class="miniDragBox" id="MiniBox10">10</div> 
      <div class="miniDragBox" id="MiniBox11">11</div> 
      <div class="miniDragBox" id="MiniBox12">12</div> 
      <div class="miniDragBox" id="MiniBox13">13</div> 
      <div class="miniDragBox" id="MiniBox14">14</div> 
      <div class="miniDragBox" id="MiniBox15">15</div> 
      <div class="miniDragBox" id="MiniBox16">16</div>
</div>
</fieldset>  
      <div></div>

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

JavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AM

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AM

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AM

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

From C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AM

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks agoByDDD

Will R.E.P.O. Have Crossplay?

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Hot Topics

Where is the login entrance for gmail email?

7546

CakePHP Tutorial

1382

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers