두 개의 DIV를 드래그 할 수있게 만드는 방법은 무엇입니까?

Question

Div1과 Div2가 있다고 가정 해보십시오. 사용자가 Div1을 드래그 할 때 Div2도 드래그해야합니다. 어떤 아이디어로 어떻게 만들 수 있습니까?

여기에 지금까지 가지고 무슨 ...

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

편집 ----------------------------- -------------------------------------

감사합니다. 지금까지 :

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

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

    </script> 

옳은 것 같지만 ... 음, 작동하지 않습니다. 어떤 아이디어?

Answer 1

여기 http://jsfiddle.net/9FrXr/2/

당신은 대신 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 2

은 드래그 가능한 이벤트에 바인딩하는 방법을 보려면 http://docs.jquery.com/UI/Draggable#event-drag을보십시오. div1의 draggable 이벤트를 div2의 좌표를 변경하는 함수에 바인딩합니다.

건배.

Answer 3

다시 한 번 말씀 드리지만, 웹 페이지에서 완전히 작동하고 있습니다. 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> 

Answer 4

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

     } 

}