javascriptを使用して要素を移動するにはドラッグ

Question

要素の位置を設定するにはどうすればよいですか？ユーザーが要素（画像）をドラッグすると、それを同期して動かしたいと思います。私の "mousemove"ハンドラが呼び出されているのが分かります。しかし、私は実際に移動する要素を取得することはできません。ここで

は、MouseMoveのハンドラは、（ドラッグされている要素は、 "オーバーレイ" である）です。

function handleMouseMove (event) 
{ 
    var deltaX = event.movementX; 
    var deltaY = event.movementY; 

    var divOverlay = document.getElementById ("overlay"); 
    var rect = divOverlay.getBoundingClientRect(); 

    divOverlay.style.left = rect.x + deltaX; 
    divOverlay.style.top = rect.y + deltaY; 
} 

ここで "オーバーレイ" は、HTMLの：

<div id="overlay"> 
    ... some other stuff ... 
    <img id="large" src="something.jpg" > 
</div> 

とCSS：

#overlay {position:absolute; left:0; top:0} 

デフォルトのドラッグ操作のマニフェストは、マウスで動く「オーバーレイ」の影です。しかし要素自体は動かない。

Answer 1

なく、あなたの実際の実装について確認してください。しかし、このコードの動作：

あなたのコードを使って行うには、ここにコードがあります。あなたのコードに明白な問題は、あなたのstyle.leftとstyle.rightに 'px'を追加する必要があることです。また、実際にコードからイベントをどのように処理するかは不明です。このコードを使用すると、要素は円内を移動しますが、それを修正する必要がありますが、アイデアは得られます。以下は

var divOverlay = document.getElementById ("overlay"); 
var isDown = false; 
divOverlay.addEventListener('mousedown', function(e) { 
    isDown = true; 
}, true); 

document.addEventListener('mouseup', function() { 
    isDown = false; 
}, true); 

document.addEventListener('mousemove', function(event) { 
    event.preventDefault(); 
    if (isDown) { 
    var deltaX = event.movementX; 
    var deltaY = event.movementY; 
    var rect = divOverlay.getBoundingClientRect(); 
    divOverlay.style.left = rect.x + deltaX + 'px'; 
    divOverlay.style.top = rect.x + deltaX + 'px'; 
} 
}, true); 

---

それを行うための別の方法です。 Codepen example

var offset = [0,0]; 
var divOverlay = document.getElementById ("overlay"); 
var isDown = false; 

divOverlay.addEventListener('mousedown', function(e) { 
isDown = true; 
offset = [ 
    divOverlay.offsetLeft - e.clientX, 
    divOverlay.offsetTop - e.clientY 
]; 
}, true); 

document.addEventListener('mouseup', function() { 
    isDown = false; 
}, true); 

document.addEventListener('mousemove', function(e) { 
    event.preventDefault(); 
    if (isDown) { 
     divOverlay.style.left = (e.clientX + offset[0]) + 'px'; 
     divOverlay.style.top = (e.clientY + offset[1]) + 'px'; 
    } 
}, true); 

Answer 2

jQueryはオプションですか？コードがすでに存在しているので、実際にあなたがしていることが簡単になります。

http://jqueryui.com/demos/draggable/

デモ：http://jsfiddle.net/wfbY8/4/

のJavaScriptコード

window.onload = addListeners; 

function addListeners(){ 
    document.getElementById('dxy').addEventListener('mousedown', mouseDown, false); 
    window.addEventListener('mouseup', mouseUp, false); 

} 

function mouseUp() 
{ 
    window.removeEventListener('mousemove', divMove, true); 
} 

function mouseDown(e){ 
    window.addEventListener('mousemove', divMove, true); 
} 

function divMove(e){ 
    var div = document.getElementById('dxy'); 
    div.style.position = 'absolute'; 
    div.style.top = e.clientY + 'px'; 
    div.style.left = e.clientX + 'px'; 
}​ 

Answer 3

私は角度、see hereのために同様の数週間前に何かを作るでした。それはあなたを少し助けるかもしれません。

基本的には、あなたがやろうとしていることをやりたいと思っていましたが、ドラッグイベントを使用するには、ドラッグしている要素を削除する必要があります。要素をドラッグ/移動したい場合は、top、bottom、left、rightのスタイルを使用してページ上の位置を設定する必要があります。したがって、それらの要素は、理想的にはfixedまたはabsoluteの位置になければなりません。

次に、要素を移動するベクトルを計算するための、これのコアに行きます。 mousemoveイベントは、マウス座標にアクセスできるMouseEventのみを送出するため、マウスがどのベクトルに移動したかをカウントアップし、同じベクトルで要素を移動することができます。

基本的に私がやったことは、（それがES5に理解できる願っています）であった：

var elementPosition = [0,0]; 
var mousePosition = [0,0]; 
var element   = document.getElementById('yourElement'); 

var mainEH = function (event) { 
    mousePosition = [event.clientX, event.clientY]; 
    document.addEventListener('mousemove', calcEH); 
    document.addEventListener('mouseup', removeHandlers); 
    document.addEventListener('contextmenu', removeHandlers); 
}; 

var calcEH = function (event) { 
    var vector  = [-mousePosition[0] + event.clientX, -mousePosition[1] + event.clientY]; 
    mousePosition = [mousePosition[0] + vector[0], mousePosition[1] + vector[1]]; 
    elementPosition = [elementPosition[0] + vector[0], elementPosition[1] + vector[1]]; 
    updatePosition(); 
}; 

var removeHandlers = function() { 
    document.removeEventListener('mousemove', calcEH); 
    document.removeEventListener('mouseup', removeHandlers); 
    document.removeEventListener('contextmenu', removeHandlers); 
}; 

function updatePosition() { 
    element.style.left = elementPosition[0] + "px"; 
    element.style.top = elementPosition[1] + "px"; 
} 

element.addEventListener('mousedown', mainEH, true); 

私は今それをテストすることはできません、この正確なコードが動作しているかわからないんだけど、あなたは私がやったhereどのように見ることができますこれは角度を使用しています。あなたのためにうまくいくことを願っています。少なくともあなたはそのアイデアを得る。とにかく、要素の初期位置を設定する関数を実行する必要があります。

UPDATE

私はちょうどそれはあなたが探しているまさにではないことに気づきました。私があなたを正しく理解していれば、要素全体をドラッグアンドドロップしながら移動したいと考えています。しかし、私はおそらく解決策はかなり類似している可能性があるので、ここで答えを残しておきます。私はおそらく前に投稿したロジックを使用して実際にそれを行うことができます。実際にmousemoveイベントが発生したときに絶対位置に設定する要素を移動することができるようになり、mouseupで位置絶対属性を削除できます。