एचटीएमएल 5: एक्स-अक्ष पर खींचें/छोड़ें और बिना फीका?

Question

मैं एचटीएमएल 5 के लिए ड्रैग-एंड-ड्रॉप उदाहरण/ट्यूटोरियल ढूंढ रहा हूं, लेकिन उनमें से सभी अब तक एक ऑब्जेक्ट शामिल करते हैं जो इसे खींचा जा रहा है और बिना किसी धुरी के बाध्य किए। मैं सोच रहा था कि वास्तविक वस्तु को अपने भूत के विरोध में खींचा जा सकता है और क्या मैं इसे एक्स या वाई अक्ष में बाध्य कर सकता हूं?

धन्यवाद!

Answer 1

हाँ, आसानी से, इसे स्वयं लिखकर।

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; 
    }; 
}