2012-01-19 13 views
9

私はHTML5のドラッグアンドドロップの例やチュートリアルを探していましたが、それらのすべてには、ドラッグされていくうちにフェードし、軸に制約されないオブジェクトが含まれています。私はそれが実際のオブジェクト自体を幽霊と反対にドラッグすることが可能かどうか、それをX軸またはY軸に制約できるかどうか疑問に思っていましたか?HTML5:X軸でドラッグ&ドロップしてもフェードしませんか?

ありがとうございます!

答えて

17

はい、簡単に、あなた自身で書くことができます。

elem.onmousedown = function(e) { 
    e = e || window.event; 
    var start = 0, diff = 0; 
    if(e.pageX) start = e.pageX; 
    else if(e.clientX) start = e.clientX; 

    elem.style.position = 'relative'; 
    document.body.onmousemove = function(e) { 
     e = e || window.event; 
     var end = 0; 
     if(e.pageX) end = e.pageX; 
     else if(e.clientX) end = e.clientX; 

     diff = end-start; 
     elem.style.left = diff+"px"; 
    }; 
    document.body.onmouseup = function() { 
     // do something with the action here 
     // elem has been moved by diff pixels in the X axis 
     elem.style.position = 'static'; 
     document.body.onmousemove = document.body.onmouseup = null; 
    }; 
} 
+0

すごいよ!どうもありがとうございました! – Sam

+0

'evt'のように見えるのは' e'ですか? 'evt.pageX'と' evt.clientX'と同様です。 – bloodyKnuckles

+2

例:https://jsfiddle.net/BloodyKnuckles/jubdc68s/ – bloodyKnuckles

関連する問題