如何使两个DIV可拖动？

Question

说我有Div1和Div2。我想在用户拖动Div1时使用，Div2也应该拖动。任何想法我该怎么做？

这是我到目前为止所得到的......

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

EDIT ---------------------------------------------- --------------------

谢谢，我查看了文档并且到目前为止：

  <script>
$(document).ready(function() {
    $("#apDiv1").draggable();
  });

$( "#apDiv1" ).bind( "drag", function(event, ui) {
                $( "#apDiv2" ).css({ top: event.offsetY, left: event.offsetX });

  </script>

似乎是对的，但是......嗯，不是'工作。任何想法？

Answer 1

查看http://docs.jquery.com/UI/Draggable#event-drag以了解如何绑定到可拖动的事件。将div1的可拖动事件绑定到更改div2

坐标的函数

干杯。

Answer 2

关于您的修改，我做了一些可以在http://jsfiddle.net/9FrXr/2/

查看的更改

你没有关闭“drag”绑定而不是event.offsetY和event.offsetX我使用了ui.offset.top和ui.offset.x。拖动绑定也已移入document.ready函数。

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

Answer 3

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

        }

}

Answer 4

再次感谢，让它完全在网页上工作。您可以通过在www [dot] skyeye [dot] cc。

上移动菜单来查看它

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

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

  </script>