JavaScriptの画像のドラッグ可能なクローン

Question

私は画像をドラッグ可能にしようとしていますが、（画像そのものではなく）画像のクローンをドラッグしようとしています。コピーは正常に動作しているようですが、onmouseupトリガが起動するまで、onmousemoveトリガは起動しません。私はこれが事態の仕方だとは思わないでしょう。

var Draggable = { 
    obj : null, 
    clone : null, 
    lastMessageSent : null, 

    init : function(o) { 
    o.style.cursor = "move"; 
    o.onmousedown = function(e) { 
     Draggable.obj = this; 
     Draggable.start(e); 
    }; 
    }, 

    start : function(e) { 
    e.preventDefault(); 

    Draggable.obj.style.cursor = "move"; 
    Draggable.createClone(); 

    window.onmousemove = function(e) { Draggable.beginDrag(e) }; 
    window.onmouseup = function(e) { Draggable.endDrag(e) }; 
    }, 

    createClone : function() { 
    Draggable.clone = Draggable.obj.cloneNode(true); 
    Draggable.clone.style.position = "absolute"; 
    Draggable.clone.style.top = "-800px"; 
    Draggable.clone.style.left = "-800px"; 
    Draggable.clone.style.zIndex = "90000"; 
    Draggable.clone.style.opacity = .35; 
    Draggable.clone.id = "dragClone"; 

    document.body.appendChild(Draggable.clone); 
    }, 

    beginDrag : function(e) { 
    var scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop); 
    Draggable.clone.style.top = (e.clientY - 40 + scrollTop) + "px"; 
    Draggable.clone.style.left = (e.clientX - 40) + "px"; 
    }, 

    endDrag : function (e) { 
    window.onmousemove = window.onmouseup = null; 
    Draggable.obj.style.cursor = "normal"; 
    Draggable.clone.parentNode.removeChild(Draggable.clone); 
    }, 

}; 


window.onload = function() { Draggable.init(document.getElementById("monkey")) }; 

Answer 1

以下

動作するコードは、あなたがにdocumentElement（htmlタグ）にsetCaptureを使用してみましたか？

start : function() 
{  
    Draggable.createClone(); 
    documentElement.setCapture(); 
    documentElement.onmousemove = Draggable.beginDrag; 
    documentElement.onmouseup = Draggable.endDrag; 
}, 

endDrag : function() 
{ 
    documentElement.releaseCapture(); 
    documentElement.onmousemove = null; 
} 

これにより、すべてのマウスイベントがdocumentElementによって取得されます。イベントはまだそれまでバブルアップする必要がありますが、ドキュメントオブジェクトに対してsetCaptureを使用することはできません。 setCaptureについてはMSDN documentationを参照してください。

Answer 2

EDIT：主な問題は、クローンをオリジナルの前に置いていることです。どうしてmousedownイベントが最初に起動するのかという理由で、クローンを後ろに置き、オリジナルを動かしてみてはいかがですか？

私の他の答えはクロスブラウザ互換ではなかったので、私は別のものを持っていると思った。

画像をマウスでクリックした状態でDraggable.startを呼び出すのではなく、文書を使用して画像からバブルアップして、イベントオブジェクトのsrcElementプロパティを確認して画像が確実にクリックされたことを確認してください。

document.onmousedown = function() 
{ 
    if (/Draggable/.test(event.srcElement.className)) 
    { 
     Draggable.obj = event.srcElement; 
     Draggable.start; 
    } 
} 

ちょうどイベントバブリングを上のもので取り消されないことを確認してください：

には、以下のことが「ドラッグ可能」という単語を含むようにドラッグ可能な画像のクラス属性を設定し、操作する方法の例です。文書の上にその方法。

Answer 3

ブラウザのデフォルトドラッグ操作が、実装しようとしていたドラッグ操作を無効にしていました。

mousedownイベントでpreventDefaults（）を呼び出して解決しました。

init : function(o) { 
    Draggable.obj = o; 
    o.onmousedown = Draggable.start; 
}, 

start : function(e) { 
    e.preventDefault(); 
    Draggable.createClone(); 
    document.onmousemove = Draggable.beginDrag; 
    document.onmouseup = Draggable.endDrag; 
}, 

詳細：https://developer.mozilla.org/en/DOM/event.preventDefault