页面导航：首页 → 网络编程 → AJAX相关 → 正文内容

AjaxUI：鼠标拖拽

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<meta content-type="text/html" charset="gb2312"/> 
<style type="text/css"> 
body{padding:0px;text-align:center;font:12px Arial;} 
div.container{width:100px;height:100px;border:1px solid #000;margin:10px auto;} 
div#main{width:99px;height:99px;border:1px solid #000;background:#050;color:#fff;font:12px Arial;margin:auto;} 
p{text-algin:left;} 
</style> 
<script type="text/javascript">

/********************Mouse类及其方法********************/ 
//创建鼠标类 
var Mouse=new Object();

//获取鼠标位置 
Mouse.getMousePosition=function(event) 
 { 
    var event=event || window.event; 
    if(event.pageX) 
    { 
        return {x:event.pageX,y:event.pageY}; 
    } 
    else 
    { 
        var x=event.clientX+document.body.scrollLeft-document.body.clientLeft; 
        var y=event.clientY+document.body.scrollTop-document.body.clientTop; 
        return {x:x,y:y}; 
    } 
} 
//鼠标是否按下 
Mouse.isDown=false;

/*************************Element类及其方法***********************/ 
var Element=new Object();

//根据id获取目标 
Element.getElement=function(id) 
{ 
    var obj=document.getElementById(id); 
    if(obj) 
    { 
        return obj; 
    } 
    else 
    { 
        alert("getElement():no such Element"); 
        return null; 
    } 
}

//获取元素自身的尺寸 
Element.getElementSize=function(object) 
{ 
    try 
    { 
        return {width:object.offsetWidth,height:object.offsetHeight}; 
    } 
    catch (error) 
    { 
        alert("getElementSize():Element is undefined"); 
        return null; 
    } 
}

//获取元素的位置 
Element.getElementPosition=function(object) 
{ 
    try 
    { 
        var left=0,top=0; 
        while(object.offsetParent) 
        { 
            left+=object.offsetLeft; 
            top+=object.offsetTop; 
            object=object.offsetParent; 
        } 
        return {left:left,top:top}; 
    } 
    catch (error) 
    { 
        alert("getEelementPosition():Element is undefined"); 
        return null; 
    } 
}

//获取元素的父节点 
Element.getElementParentNode=function(obj) 
{ 
    try 
    { 
        return obj.parentNode; 
    } 
    catch (error) 
    { 
        alert("getElementParentNode():Element is undefined"); 
        return null; 
    } 
}

/***********************功能函数**************************/

//移动函数 
//移动可拖动元素，并且在其接近目标元素时使目标元素的边框现实为红色。 
function move(event,dragObj,targetElementAry) 
{ 
    var event=event || window.event; 
    var obj=dragObj; 
    if(Mouse.isDown) 
    { 
        //计算可拖动元素的x,y坐标. 
        var left=Mouse.getMousePosition(event).x-parseInt(obj.getAttribute("difX")); 
        var top=Mouse.getMousePosition(event).y-parseInt(obj.getAttribute("difY"));

//判断可拖动元素的x,y坐标与目标元素坐标是否接近 
        for(i=0;i<targetElementAry.length;i++) 
        { 
            var targetLeft=Element.getElementPosition(targetElementAry[i]).left; 
            var targetTop=Element.getElementPosition(targetElementAry[i]).top; 
            if(Math.abs(left-targetLeft)<30&&Math.abs(top-targetTop)<30) 
            { 
                targetElementAry[i].style.borderColor="#f00"; 
            } 
            else 
            { 
                targetElementAry[i].style.borderColor="#000"; 
            } 
        }

//设置可拖动元素的x,y位置. 
        obj.style.top=top+"px"; 
        obj.style.left=left+"px"; 
    } 
     
}

//移动函数 
//移动前的准备工作 
//计算偏差,clone可拖动元素并将其隐藏 
//设置一些参数 
function startDrag(event,dragObj,targetElementAry) 
{ 
    var event=event || window.event; 
    var obj=event.target || event.srcElement; 
    var    left=Element.getElementPosition(obj).left; 
    var    top=Element.getElementPosition(obj).top;

//计算偏差 
    var    difX=Mouse.getMousePosition(event).x-left; 
    var    difY=Mouse.getMousePosition(event).y-top;

//clone节点 
    dragObj.appendChild(obj.cloneNode(true));

//设置透明度 
    dragObj.childNodes[0].style.filter="alpha(opacity=50)"; 
    dragObj.childNodes[0].style.opacity=0.5;

dragObj.style.left=left+"px"; 
    dragObj.style.top=top+"px"; 
    dragObj.style.display="block";

//设置参数 
    dragObj.setAttribute("difX",difX); //偏差 
    dragObj.setAttribute("difY",difY);  
    dragObj.setAttribute("originTop",top); //原始目标y坐标 
    dragObj.setAttribute("originLeft",left); //原始目标x坐标 
    dragObj.setAttribute("originObj",obj.id); //原始目标id

obj.style.display="none";

//标记鼠标为按下 
    Mouse.isDown=true;

//鼠标移动响应 
    document.onmousemove=function(e){move(e,dragObj,targetElementAry);}; 
}

//辅助函数 
//移除指定节点的所有子节点 
function removeNodeChild(obj) 
{ 
    for(j=obj.childNodes.length-1;j>=0;j--) 
    { 
        obj.removeChild(obj.childNodes[j]); 
    } 
}

//初始化 
function init() 
{ 
    //创建隐藏的拖动层 
    var dragObj=document.createElement("div"); 
    dragObj.setAttribute("id","dragDiv"); 
    dragObj.style.cssText="position:absolute;top:0px;left:0px;display:none;"; 
    document.body.appendChild(dragObj);

//创建目标数组 
    var targetElementAry=new Array(Element.getElement("one"),Element.getElement("two"),Element.getElement("three"),Element.getElement("four"));

//添加事件 
    document.onmousedown=function(event) 
    {    
        var event=event || window.event; 
        var obj=event.target || event.srcElement; 
        if(obj.id=="main") 
        { 
            startDrag(event,dragObj,targetElementAry); 
        } 
    }

//添加事件 
    //检查可移动元素的位置和目标元素的位置是否接近 
    //是，则将其移动到目标 
    //否，将其移动到原始位置 
    document.onmouseup=function() 
    { 
        Mouse.isDown=false; 
        var left=parseInt(dragObj.style.left); 
        var top=parseInt(dragObj.style.top); 
        var index=-1; 
        for(i=0;i<targetElementAry.length;i++) 
        { 
            var targetLeft=Element.getElementPosition(targetElementAry[i]).left; 
            var targetTop=Element.getElementPosition(targetElementAry[i]).top; 
            if(Math.abs(left-targetLeft)<30&&Math.abs(top-targetTop)<30) 
            { 
                index=i; 
            } 
        } 
        if(index>-1) 
        { 
            var id=dragObj.getAttribute("originObj"); 
            removeNodeChild(dragObj); 
            dragObj.style.display="none"; 
            var obj=Element.getElement(id); 
            var node=obj.cloneNode(true); 
            var parent=Element.getElementParentNode(obj); 
            removeNodeChild(parent); 
            targetElementAry[index].appendChild(node); 
            targetElementAry[index].childNodes[0].style.display="block"; 
        } 
        else 
        { 
            var id=dragObj.getAttribute("originObj"); 
            dragObj.style.left=dragObj.getAttribute("originLeft")+"px"; 
            dragObj.style.top=dragObj.getAttribute("originTop")+"px" 
            removeNodeChild(dragObj); 
            dragObj.style.display="none"; 
            if(id) 
            { 
                Element.getElement(id).style.display="block"; 
            } 
        } 
    }     
}

window.onload=init; 
</script> 
</HEAD> 
<BODY> 
<div id="one" class="container"></div> 
<div id="two" class="container"></div> 
<div id="three" class="container"></div> 
<div id="four"  class="container"></div> 
<div><div id="main">drag me</div></div> 
在绿色方块上按下鼠标，可以将其拖动，在方块的位置靠近某个方框并且方框的边线显示红色时，放开鼠标，方块会自动进入方框，其它位置放开鼠标，方块会返回上一次的位置。 
</BODY> 
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：AjaxUI：鼠标拖拽