0

JavaScript のドラッグ アンド ドロップに関する優れたチュートリアルを探していました。要素をdivまたはキャンバスとして移動したり、サイズを変更したりするのではなく、ドラッグの動きを返すだけです。

例:

  • 怒っている鳥のパチンコのように、またはキャンバス内で画像をドラッグして移動します。
  • マウスドラッグで「地図」を移動。
  • Div で、同じ要素内でポイント A から B にドラッグし、移動せずに、既に実行中のすべてのコードを停止せずに移動を返すだけです

これまでに見つけた例は、要素全体をドラッグ可能にすることで、さまざまなフレームワークで要素を移動することです。それは私が求めているものではないので、正しい方向に向けてください。あなたはその日の私のヒーローになります

4

3 に答える 3

0

このリンクを確認してください：

http://jqueryui.com/draggable/

左右のペインにたくさんのサンプルがあり、それらの使用方法の詳細もあります。これがお役に立てば幸いです。

または、いつでもmousedown、mouseup、mousemoveイベントを使用して手動で計算することもできます。あなたが快適なもので私に連絡してください。

于 2012-12-27T16:36:19.437 に答える
0

これが私が通常行う方法です。かなり簡単です。

1 mousedown で、マウスの座標をオブジェクトに保存し、距離を計算する mousemove 関数をバインドします。

2 mouseup で、mousemove ハンドラをバインド解除します。

以下にいくつかのコード例を示します。

var coords; // the starting point

var move = function(e) {
      var diffX = e.pageX - coords.x; // the moved x distance
      var diffY = e.pageY - coords.y; // the moved y distance
      console.log('move: '+diffX+'(x) '+diffY+'(y)');
    };

$(document).mousedown(function(e) {
  coords = {x: e.pageX, y: e.pageY}; // saves the mouse position on mousedown
  $(this).mousemove(move);
}).mouseup(function() {
  $(this).unbind('mousemove', move);
});

デモ: http://jsbin.com/okatoj/1 (コンソールを見る)

于 2012-12-27T16:42:18.047 に答える
0

マウス ポインターの座標のみが必要な場合は、イベントのclientXおよびclientYプロパティを使用できます。mousemove

window.addEventListener("mousemove",function(e) { 
    console.log(e.clientX,e.clientY); 
},false);

その例ではリスナーをwindowオブジェクトにアタッチしていますが、他の要素でも同じことができます..document.getElementById('mydiv').addEventListener

于 2012-12-27T17:18:19.670 に答える