एचटीएमएल 5 खींचें और क्रोम

Question

में फायरिंग नहीं ondragover ड्रॉप

मैं इस सरल उदाहरण यहाँ जो मुझे http://jsfiddle.net/G9mJw/ एक बहुत ही सरल कोड पर होते हैं, जिसके लिए क्रोम 11 में फायरिंग नहीं है:

var dropzone = document.getElementById('dropzone'), 
    draggable = document.getElementById('draggable'); 


function onDragOver(event) { 
    var counter = document.getElementById('counter'); 
    counter.innerText = parseInt(counter.innerText, 10) + 1; 
} 


dropzone.addEventListener('dragover', onDragOver, false); 

यह सफारी में ठीक से काम करने लगता है था ... लेकिन क्रोम में dragover घटना को तब नहीं कहा जा रहा है जब लाल वर्ग बिंदीदार स्पर्श करता है।

मैंने कुछ उदाहरणों को दोहराने की कोशिश की है जो वर्तमान में क्रोम में काम कर रहे हैं लेकिन यह मेरे लिए भी काम नहीं करता है।

मैंने काम करने पर डिफ़ॉल्ट व्यवहार को रोकने की कोशिश की है, लेकिन ऐसा नहीं हुआ। किसी भी मदद को बहुत सराहा जाएगा।

धन्यवाद

Answer 1

ऐसा लगता है कि यह dropzone पर लागू किया जाना करने के लिए dragover घटना के लिए dragstart घटना पर खींचे जाने योग्य तत्व करने के लिए कुछ डेटा सेट करने की जरूरत है।

मैंने स्निपेट http://jsfiddle.net/G9mJw/20/ अपडेट किया है जो अब क्रोम में भी काम करता है।

और नए कोड इस प्रकार है:

var dropzone = document.getElementById('dropzone'), 
    draggable = document.getElementById('draggable'); 


function onDragStart(event) { 
    event.dataTransfer.setData('text/html', null); //cannot be empty string 
} 

function onDragOver(event) { 
    var counter = document.getElementById('counter'); 
    counter.innerText = parseInt(counter.innerText, 10) + 1; 
} 

draggable.addEventListener('dragstart', onDragStart, false); 
dropzone.addEventListener('dragover', onDragOver, false); 

इसके अलावा यह कैसे में काम करता है के बारे में कुछ और जानकारी नहीं है:

जब एक खींचें होती है, तो डेटा करना होगा: https://developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Data और इस तरह उल्लेख बातें ड्रैग से जुड़े रहें जो पहचानता है कि क्या खींचा जा रहा है।

जो समझने में आसान बनाता है ... मैं सिर्फ यह समझने की कोशिश कर रहा हूं कि यह कुछ डेटा भेजने की आवश्यकता के बिना सफारी में कैसे काम करता है? या शायद यह पहले से ही कुछ सामग्री डिफ़ॉल्ट रूप से भेजता है?

event.dataTransfer.setData('text/html', null); विधि, उत्सुकता से event.dataTransfer.setData('text/html', ''); जैसी खाली स्ट्रिंग नहीं भेज सकती अन्यथा dragover ईवेंट प्रेषित नहीं किया जाएगा।

Answer 2

क्रोम वर्तमान में केवल कुछ डेटा प्रकारों का समर्थन करता है - यदि आपके डेटा में एक मान्यता प्राप्त एमआईएम प्रकार नहीं है तो ड्रैग/ड्रॉप बस आगे नहीं बढ़ता है। यह डब्ल्यू 3 सी स्पेक का उल्लंघन करने में बहुत स्पष्ट रूप से है, और फ़ायरफ़ॉक्स में कोई समस्या नहीं है (जब तक आप कुछ डेटा प्रदान करते हैं) या यहां तक ​​कि सफारी (जो खींचने की अनुमति देता है कि डेटा सेट है या नहीं)।

क्रोमियम के बग रिपोर्ट यहाँ है: http://code.google.com/p/chromium/issues/detail?id=93514

Answer 3

मैं माइम प्रकार में समस्या आई। http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

उनकी कोड नमूना मेरे लिए काम नहीं करेगा जब तक मैं "पाठ" के बजाय GetData और setData करने के लिए "text/html" परिवर्तित किया गया:

W3Schools एक पृष्ठ आप प्रयोग कर सकते हैं के साथ है।

मैं उपयोग कर रहा हूँ: संस्करण 34.0.1847.116 Ubuntu 14.04 आभा (260972)