एचटीएमएल 5 ड्रैग रिलीज ऑफसेटएक्स ऑफ़सेट वाई कूद

Question

मैं एचटीएमएल 5 ड्रैग के साथ खेल रहा हूं और ड्रैग करते समय माउस की स्थिति को ट्रैक और ट्रैक कर रहा हूं।

OffsetX और OffsetY भयानक काम करता है जब तक आप माउस छोड़ दें, ऑफसेट पिछले खींचें घटना भेजा

यहाँ एचटीएमएल है पर एक नकारात्मक संख्या के लिए कूद:

:

<div id="dragger"></div> 
<div id="console"></div> 

यहाँ

सीएसएस है

#dragger{ 
    -webkit-user-drag: element; 
    width: 100px; 
    height: 100px; 
    background: hsla(200, 100%, 50%, 0.4); 
}​ 

और जे एस

$('#dragger').bind('drag', function (e) { 
    $('#console').html(e.originalEvent.offsetX); 
})​ 

तुम भी http://jsfiddle.net/Eu2mz/5/

पर परीक्षण भी मैं सिर्फ यह अब के लिए वेबकिट में काम करने के लिए प्राप्त करने के लिए कोशिश कर रहा हूँ कर सकते हैं।

Answer 1

आपका जेएसफ़िल्ड लिंक भी विंडो आकार से प्रभावित होता है। संभावनाओं को संकीर्ण करने के लिए इसे अपने स्वयं के डॉक्टर में आज़माएं?

Answer 2

आप ड्रैग एंड इवेंट जोड़ सकते हैं जिससे समस्या हल होनी चाहिए।
इस तरह:

$('#dragger').bind('dragend', function (e) { 
    $('#console').html(e.originalEvent.offsetX); 
}) 

Answer 3

मैं पता नहीं क्यों, लेकिन जब से अधिक खींचकर या खींचने योग्य वस्तु के बाहर छोड़ने कुछ अस्पष्ट संख्या के लिए offsetX, offsetY, clientX, clientY आदि गुण बदल देगा।

दस्तावेज़ ड्रॉप और ड्रैगओवर घटनाओं पर preventDefault पर ठीक है।

document.addEventListener("drag", function(event) { 
 
    var element = document.getElementById('console'); 
 
    element.textContent = event.clientX; 
 
}, false); 
 

 
document.addEventListener("dragover", function(event) { 
 
    event.preventDefault(); 
 
}, false); 
 

 
document.addEventListener("drop", function(event) { 
 
    event.preventDefault(); 
 
}, false);

#dragger{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background: hsla(200, 100%, 50%, 0.4); 
 
}

<div draggable="true" id="dragger" ondragstart="event.dataTransfer.setData('text/plain',null)"></div> 
 
<div id="console"></div>

Answer 4

मैं एक ही समस्या थी और एक समाधान है कि समय की 99.99999% काम करेंगे के साथ आया था। विवरण नीचे है:

समाधान (हर मामले में काम करना चाहिए उपयोगकर्ताओं के संबंध में चलेंगे)

eng.window.addEventListener(
    "drag" 
    ,function(event){ 
     //If both screenX and screenY are 0, likely the user just released. 
     if(!event.screenX && !event.screenY) return; 

     //Your code here 
    } 
); 

स्पष्टीकरण

मैं घटना के माध्यम से देखा माउस को जारी करने की लौट आए और यह घटना की तुलना तुरंत पहले, और कुछ भी नहीं मिला जो 100% मामलों में काम करेगा- कोई आसान "बटन दबाया गया" सुविधा या ऑब्जेक्ट के अंदर छिपी हुई कोई चीज़ नहीं है।

मैं देखा था कि हालांकि कर्सर की स्थिति के हर एक उपाय है जब आप जारी बदल गई है: clientX, layerX, offsetX, pageX, screenX, और नियमित रूप से x/y। वे सभी शीर्ष-बाएं मूल्य के लिए डिफ़ॉल्ट हैं, जो खिड़की के शीर्ष-बाएं कोने में हो सकते हैं- या स्क्रीन।

लेकिन संभावना है कि आपका उपयोगकर्ता पूर्णस्क्रीन मोड में जायेगा और एक तत्व को अपनी स्क्रीन के शीर्ष-बाएं पिक्सेल में खींच देगा?(क्रोम में मेरे लिए, screenX वास्तव में खिड़की के बाएँ किनारे पर सेट किया जाता है, लेकिन screenY खाते में Chrome की HUD लेता है)

इसलिए जब ऊपर में काम नहीं करेगा कि 1 हाशिये मामले (जो आपके उपयोगकर्ताओं को होने की संभावना कभी नहीं होगा - कभी भी दौड़ें), यह हर दूसरे समय काम करेगा।

क्रोम में परीक्षण किया गया।