ドラッグ可能なオブジェクトの背後にある技術は何ですか？

Question

純粋なJavaScriptでドラッグ可能なHTMLページのdivを外部ライブラリを使用せずに作成する方法を学びたいので、私はいくつかの技術を試しましたが、適切なドラッグ可能なオブジェクトにしませんでした。私は私のコードで何か重要なものを逃していると確信しているので、私はdraggableオブジェクトの背後にある基本的なアイデアを知りたいです。私はあなたがpの初期位置を保存し、追加することを忘れてはならないいくつかのstartxとstartYと位置を設定し、事業部の位置は絶対作り、

p.style.left = (e.clientX-startX) + 'px'; 

p.style.top = (e.clientY-startY) + 'px'; 

// where p is the element i am trying to make draggable 

Answer 1

としてCSSでdiv要素の左と上を設定することにより、それを達成しようとしていましたあなたが相対的な計算をしていることを確認するたびにそれを行います。現在、ドラッグを開始するときにが常に(0, 0)の位置にあると仮定します。

第2に、selectstartイベントをキャンセルすると、ドラッグ時に醜い選択が作成されなくなります。

コードをhttp://jsfiddle.net/rLegF/1/に少し変更しました。

var p = document.getElementById("p"), 
    startX, startY, 
    origX, origY, 
    down = false; 

document.documentElement.onselectstart = function() { 
    return false; // prevent selections 
}; 

p.onmousedown = function(e) { 
    startX = e.clientX; 
    startY = e.clientY; 

    origX = p.offsetLeft; 
    origY = p.offsetTop; 

    down = true; 
}; 

document.documentElement.onmouseup = function() { 
    // releasing the mouse anywhere to stop dragging 
    down = false; 
}; 

document.documentElement.onmousemove = function(e) { 
    // don't do anything if not dragging 
    if(!down) return; 

    p.style.left = (e.clientX - startX) + origX + 'px'; 
    p.style.top = (e.clientY - startY) + origY + 'px'; 
}; 

編集：あなたは基本的に常に- startX + origXをやっているので、またstartXとorigXを組み合わせることができ：http://jsfiddle.net/rLegF/2/。

次に、要素の左上隅を基準にしてマウスの位置を計算し、新しいマウスの位置から古いマウスの位置を差し引いた位置に位置を設定します。おそらくそれはちょっと直感的です。

もう少し整理しました。