Javascript 如何使两个div可拖动？

假设我有Div1和Div2。我想在用户拖动Div1时，Div2也应该随之拖动。你知道我该怎么做吗

这是我到目前为止得到的

$(document).ready(function() {
    $("#apDiv1").draggable();
    $("#apDiv2").draggable(); //<- how do I link it do Div1 ?
});

$（文档）.ready（函数（）{
$（“#apDiv1”）.draggable（）；
$（“#apDiv2”）.draggable（）；//查看如何绑定到可拖动事件。将div1的可拖动事件绑定到更改div2坐标的函数

干杯。
关于您的编辑，我做了一些更改，可以在这里查看

您没有关闭“拖动”绑定，而是使用了ui.offset.top和ui.offset.x来代替event.offsetY和event.offsetX。拖动绑定也被移动到document.ready函数中

$("#apDiv1").bind( "drag", function(event, ui) {
    div.css({ top: ui.offset.top + 52, left: ui.offset.left });
});

再次感谢您，我们已经在网页上完全运行了。您可以在www[dot]skye[dot]cc上移动菜单来查看它的运行情况

  <script>
    $(function() {
    $("#apDiv3").draggable();

    $("#apDiv3").bind("drag", function(event, masterdrag) {
        $("#apDiv5").css({ top: masterdrag.offset.top, left: masterdrag.offset.left-20 });
    });
});

  </script>


$（函数（）{
$（“#apDiv3”）.draggable（）；
$（“#apDiv3”）.bind（“拖动”，函数（事件，主拖动）{
$（“#apDiv5”）.css（{top:masterdrag.offset.top，left:masterdrag.offset.left-20}）；
});
});
//JavaScript文档
//这是一个容易拖动的javascript框架
//它没有许可证，因此您可以随时修改它
//编码开始时间：2011-05-28，完成时间：2011-05-09
//代码可能包含bug。我只使用数组来存储draggables的ID:s
//为拖动器创建一个数组//我没有使用类，因为它不适合这个简单的事情
/////////////////////////////////////////////////////////////////////////////////////////////////////////
var元素=新数组（'draggable2'，'draggable3'，'draggable4'，'draggable5'，'draggable6'，'draggable7'，'draggable8'，'draggable9'，'draggable10'）；
//设置ID何时进行选择解除标签
var text=“body”；
//设置拖拽标签//
var dragException=新数组（'input'，'SPAN'）；
//////////////////////////////////////启动框架
document.onmousemove=拖动；
document.onmousedown=mouseDown；
document.onmouseup=mouseUp；
var父代；
//偏移变量//
var offsetY，offsetX；
//在此处设置超时事件保持器//
var超时=null；
//设置一个将保存拖动对象的变量//
var-ObjectDrag；
//将布尔变量设置为elerate//
var clickStage=true；
var XPos，YPos；//=0）{
Navigator=“MSIE”；
}如果（Navigator.indexOf（“Netscape”）>=0{
Navigator=“Netscape”；
}如果（Navigator.indexOf（“Firefox”）>=0{
Navigator=“Firefox”；
}如果（Navigator.indexOf（“Opera”）>=0{
Navigator=“Opera”；
}如果（Navigator.indexOf（“Safari”）>=0{
Navigator=“Safari”；
}否则{
Navigator=“NULL”；
}//如果
返回导航器；
}//作用
//完//
/////////////////////////////////////
//将浏览器版本添加到您的neads//
/////////////////////////////////////   
函数getBrowserVersion（）{
var browserName=getBrowserName（），
findIndex，
浏览；
browserVersion=navigator.userAgent；
findIndex=browserVersion.indexOf（browserName）+browserName.length+1；
browserVersion=parseFloat（browserVersion.substr（findIndex，findIndex+3））；
返回浏览；
}//作用
//完//
函数getMousePos（事件）{
var event=event | | window.event；
//获取鼠标与首页偏移的位置
//////////////////////////////////////////////////////////////
如果（event.pageX&&event.pageY）{
//我们在较新的浏览器中获得鼠标位置//
XPos=event.pageX；
YPos=event.pageY；
}否则{
//我们的值与abow相同，但这是针对较旧的浏览器的//
XPos=event.clientX+document.body.scrollLeft-document.body.clientLeft；
YPos=event.clientY+document.body.scrollTop-document.body.clientTop；
}
//这仅用于调试鼠标位置//
document.getElementById（'X'）。value=XPos/////////
document.getElementById（'Y'）。value=YPos/////////
返回{XPos:XPos，YPos:YPos}；
}
//用于禁用文本选择的功能//
函数disableTextSelection（事件）{
var event=event | | window.event；
var对象；
如果（getBrowserName（）！=“MSIE”）{object=event.target；}否则{object=event.srcElement；}
if（typeof document.getElementById（textDisableding）.onselectstart！=“未定义”）{//IE路由
document.getElementById（textDisableding）.onselectstart=function（）{return false}
object.onselectstart=function（）{return false}
}else if（document.getElementById（textDisableding）.style.MozUserSelect！=“未定义”）{//Firefox路由
document.getElementById（textDisableding）.style.MozUserSelect=“无”
object.style.MozUserSelect=“无”
}else{//所有其他路线（即：歌剧院）
document.getElementById（textDisableding）.onmousedown=function（）{return false}
object.onmousestart=function（）{return false}
}           
}
//允许文本选择功能。当你想起来的时候就叫这个//
函数allowTextSelection（）{
if（typeof document.getElementById（textDisableding）.onselectstart！=“未定义”）{//IE路由
document.getElementById（textDisableding）.onselectstart=function（）{return true}
ObjectDrag.onselectstart=函数（）{return true}
}else if（document.getElementById（textDisableding）.style.MozUserSelect！=“未定义”）{//Firefox路由
document.getElementById（textDisableding）.style.MozUserSelect=“text”
ObjectDrag.style.mozzuserselect=“text”
}else{//所有其他路线（即：歌剧院）
document.getElementById（textDisableding）.onmousedown=function（）{return true}
ObjectDrag.onmousestart=函数（）{return true}
}
}   
//设置我们将从//开始的全局函数
函数拖动（事件）{
var mousePos=getMousePos(
  <script>
    $(function() {
    $("#apDiv3").draggable();

    $("#apDiv3").bind("drag", function(event, masterdrag) {
        $("#apDiv5").css({ top: masterdrag.offset.top, left: masterdrag.offset.left-20 });
    });
});

  </script>

// JavaScript Document
//This is an easy draggable javascript frameworkt
//There is no license for it so you can modify it how ever you like
//Coding started: 2011-05-28 and finished 2011-05-09
//The code can contain bugs. I only use an array to store the ID:s of the draggables 

//Create an array for the draggers// I am not using an class because it is not nesesery for this easy thing
/////////////////////////////////////////////////////////////////////////////////////////////////////////
var Elements=new Array('draggable2','draggable3','draggable4','draggable5','draggable6','draggable7','draggable8','draggable9','draggable10');
//Set ID wher to do select disabeled
var textDisabling="body";
//Set drag TAG exeption//
var dragException=new Array('input','SPAN');
//////////////////////////////////////Start the framework 
document.onmousemove=drag;
document.onmousedown=mouseDown; 
document.onmouseup=mouseUp; 
var parent;
//Offset vars//     
var offsetY,offsetX;    
//Setup the timeout event holder here// 
var timeout=null;       
//Set a var that will hold the dragged object// 
var ObjectDrag;
    //Set boolean vars to elerate// 
var clickStage=true;    
var XPos, YPos;//<--Setting up the position vars//  

//////////////////////////////////////
//Get the browser name for your own needs//
//////////////////////////////////////      

function getBrowserName(){  

    var Navigator=navigator.userAgent;      

    if(Navigator.indexOf("MSIE")>=0){           

        Navigator="MSIE";           

    }else if(Navigator.indexOf("Netscape")>=0){             

        Navigator="Netscape";           

    }else if(Navigator.indexOf("Firefox")>=0){          

        Navigator="Firefox";            

    }else if(Navigator.indexOf("Opera")>=0){            

        Navigator="Opera";          

    }else if(Navigator.indexOf("Safari")>=0){           

        Navigator="Safari";         

    }else{      

        Navigator="NULL";       

    }//IF       

    return Navigator;       

}//Function 
//END// 
/////////////////////////////////////
//Get browser version to your neads//
/////////////////////////////////////   
function getBrowserVersion(){       

    var browserName=getBrowserName(),       

        findIndex,          

        browserVersion;         

        browserVersion=navigator.userAgent;         

        findIndex=browserVersion.indexOf(browserName) + browserName.length+1;           

        browserVersion=parseFloat(browserVersion.substr(findIndex,findIndex + 3));      

    return browserVersion;

}//Function 
//END// 
function getMousePos(event){        

    var event=event || window.event;
    //Get the position of the mouse with an offset of the top page
    //////////////////////////////////////////////////////////////

    if(event.pageX && event.pageY){ 

        //We get the mouse position in newer browsers//

        XPos=event.pageX;

        YPos=event.pageY;       

    }else{

        //We gat the same value as abow, but this is for older browsers//
        XPos=event.clientX + document.body.scrollLeft - document.body.clientLeft;           

        YPos=event.clientY + document.body.scrollTop  - document.body.clientTop;            
    }

    //This is only for debugging the mouse position//
    document.getElementById('X').value=XPos;/////////

    document.getElementById('Y').value=YPos;/////////

    return {XPos:XPos, YPos:YPos};      

}
//Function for disabling text selections//
function disableTextSelection(event){   

    var event=event || window.event;

    var object;

    if(getBrowserName() != "MSIE"){object=event.target;}else{object=event.srcElement;}

    if (typeof document.getElementById(textDisabling).onselectstart!="undefined"){ //IE route

        document.getElementById(textDisabling).onselectstart=function(){return false}

        object.onselectstart=function(){return false}

    }else if (typeof document.getElementById(textDisabling).style.MozUserSelect!="undefined"){ //Firefox route

        document.getElementById(textDisabling).style.MozUserSelect="none"

        object.style.MozUserSelect="none"


    }else{ //All other route (ie: Opera)

        document.getElementById(textDisabling).onmousedown=function(){return false}

        object.onmousestart=function(){return false}

    }           

}
//Allow text selection funtion. Call this when you do muse up//
function allowTextSelection(){

if (typeof document.getElementById(textDisabling).onselectstart!="undefined"){ //IE route

        document.getElementById(textDisabling).onselectstart=function(){return true}

        ObjectDrag.onselectstart=function(){return true}

    }else if (typeof document.getElementById(textDisabling).style.MozUserSelect!="undefined"){ //Firefox route

        document.getElementById(textDisabling).style.MozUserSelect="text"

        ObjectDrag.style.MozUserSelect="text"

    }else{ //All other route (ie: Opera)

        document.getElementById(textDisabling).onmousedown=function(){return true}

        ObjectDrag.onmousestart=function(){return true}
    }
}   

//Setup the global function that we will start from//   

function drag(event){       

    var mousePos=getMousePos(event);        

}

//Make an exception function //

function exception(event){  

    if(getBrowserName() != "MSIE"){     

        for(items in dragException){if(event.target.nodeName == dragException[items].toUpperCase())return {contin:false};}      

    }else{

        for(items in dragException){if(event.srcElement.nodeName == dragException[items].toUpperCase())return {contin:false};}      

    }

        return true;                

}

//This function checks if you are pulling the click inside the element

function isInside(event){

    var event=event || window.event;

    var object;

    if(getBrowserName() != "MSIE"){object=event.target;}else{object=event.srcElement;}

    if(object.nodeName=="HTML")return false;

    parent=object;      

    var i,l=0;      

    for(i=0;i<=l;i++){          

        if(parent.nodeName != "BODY"){          

            for(items in Elements){             

                if(Elements[items] == parent.id){                   

                    return {contin:true, id:parent};                    

                }                   

            }                           

            parent=parent.parentNode;               

            l++;            

        }else{              

            return false;               

        }

    }               

}



//Here we get the offset position so the element will follow the mouse where you

//did (mouseDown) event. If we noe capturing the offset, the element will lie line to line with the

//mouse. NO OFFSET  

function offsetObject(YPos,XPos){               

    offsetY=YPos-ObjectDrag.offsetTop;      

    offsetX=XPos-ObjectDrag.offsetLeft;     

    return false;               

}   

//Set the objects on a good z-index//   

function setZIndex(event){  

    var event=event || window.event;    

    var object;

    if(getBrowserName() != "MSIE"){object=event.target;}else{object=event.srcElement;}

    for(items in Elements){         

        document.getElementById(Elements[items]).style.zIndex="1";                      

    }           

    object.style.zIndex="20";   

}   

//Capture mouse down//

function mouseDown(event){

    var event=event || window.event;        

    /*if(getBrowserName() != "MSIE"){   */  

        timeout=null;               

        clickStage=true;            

        //Store the event if it´s not null and can be dragged//                     

            var inside=isInside(event);                         

            if(inside.contin == true && exception(event) == true){  

                /*Function that disables the text selection on drag*/

                disableTextSelection(event);                                

                ObjectDrag=inside.id;                                       

                offsetObject(YPos,XPos);                    

                //Set the z-indexes//

                setZIndex(event);                   

                moveObject();

            }           

        /*}else{                            

            alert("Browser is not suported");               

        }*/ 

    }

//Start moving the object//

function moveObject(){       

    //Stor the mouse event in this var//    

    if(clickStage == true)timeout=setTimeout(moveObject,0);     

    //Change it back to true if the mouseUp event has not trigged//     

    clickStage=true;        

    //Store the event if it´s not null and can be dragged//         

    if(clickStage==true){           

        //This is the place where we set the position of the element        

        document.getElementById(ObjectDrag.id).style.left=XPos-offsetX+"px";            

        document.getElementById(ObjectDrag.id).style.top=YPos-offsetY+"px";                             

    }

}



//Capture mouse up//

function mouseUp(event){

    var event=event || window.event;            

        if(exception(event) == true ){

        allowTextSelection();           

        timeout=null;           

        clickStage=false;       

        }

}