如何访问可拖动对象的动态变化坐标?我不只是想要stop
处的坐标,而是一个恒定的位置信息流。
换句话说,如果我拖动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>
答案 0 :(得分:3)
您可以使用drag
可拖动事件:
$("#obj1").draggable({
drag: function(event, ui) {
var pos = ui.position;
$("#obj2").css({
left: pos.left + 100,
top: pos.top + 100
});
}
});
答案 1 :(得分:1)
可拖动插件有3个事件:开始,拖动和停止(所有这些都提供坐标)。 您可以绑定到拖动事件并获取所需信息。
Here你可以找到一个例子和演示。
答案 2 :(得分:1)
offsetY
和offsetY
事件属性适用于此目的,您可以附加drag
处理程序来获取它们:
$('#obj1').bind('drag', function(event) {
console.log(event.offsetY); // dymamic y position
console.log(event.offsetX); // dymamic x position
});
参考: