4

ドラッグ可能なオブジェクトの動的に変化する座標にアクセスするにはどうすればよいですか？の座標だけでstopなく、位置情報の一定のストリームが必要です。

つまり、ドラッグすると、（1）の変化を観察し、（2）の位置に適用することで、並行して動き回るobject Aことができるはずです。object Bobject Aobject 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>
4

3 に答える 3

3

dragドラッグ可能なイベントを使用できます。

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

デモ：http： //jsfiddle.net/kPEfL/

于 2012-06-16T07:57:08.637 に答える
1

ドラッグ可能なプラグインには、開始、ドラッグ、停止の3つのイベントがあります（これらはすべて座標を提供します）。ドラッグイベントにバインドして、必要な情報をコールバックに取り込むことができます。

ここに例とデモがあります。

于 2012-06-16T07:54:35.313 に答える
1

offsetYおよびイベントプロパティはoffsetYその目的に適しているため、dragハンドラーをアタッチしてそれらをフェッチできます。

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

参照：

于 2012-06-16T08:04:16.400 に答える