jQuery可拖動 - 如何訪問座標

如何訪問可拖動對象的動態變化座標？我不只是想要在stop的座標，而是一個恆定的位置信息流。jQuery可拖動 - 如何訪問座標

換句話說，如果我拖動object A各處，我應該能夠得到object B由（1）觀察object A的變化，然後（2）將它們應用到的object B位置走動並聯。

在這段代碼中，我想讓紅色塊（obj2）與藍色一起移動（obj1）。

<html> 
<head> 
<style> 
#obj1 { 
    position:fixed; 
    top:50px; 
    left:50px; 
    width: 40px; 
    height: 40px; 
    background-color: blue; 
} 
#obj2 { 
    position:fixed; 
    top:150px; 
    left:150px; 
    width: 40px; 
    height: 40px; 
    background-color: red; 
} 
</style> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(function() { 
     $('#obj1').draggable(); 
    }) 
</script> 
</head> 

<body> 
    <div id="obj1"></div> 
    <div id="obj2"></div> 
</body> 
</html>

來源

2012-06-16 Nick

謝謝大家:) – Nick

可以使用drag事件的可拖動：

$("#obj1").draggable({ 
    drag: function(event, ui) { 
     var pos = ui.position; 
     $("#obj2").css({ 
      left: pos.left + 100, 
      top: pos.top + 100 
     }); 
    } 
});

DEMO：http://jsfiddle.net/kPEfL/

來源

2012-06-16 07:57:08 VisioN

可拖動的插件有3個事件：開始，拖動和停止（所有這些都提供座標）。您可以綁定到拖動事件並在回調中獲取所需的信息。

Here你可以找到一個例子和演示。

來源

2012-06-16 07:54:35

的offsetY和offsetY事件屬性適用於這個目的，你可以附加一個drag處理程序，以獲取它們：

$('#obj1').bind('drag', function(event) { 
    console.log(event.offsetY); // dymamic y position 
    console.log(event.offsetX); // dymamic x position 
});

R eference：

the Draggable demos page

來源

2012-06-16 08:04:16

jQuery可拖動 - 如何訪問座標

回答

相關問題