2013-09-03 6 views
6

मैंने दिन को एक अजीब समस्या पर बिताया है - मेरे पास कुछ कैनवास हैं जिन्हें मैं देशी HTML5 ड्रैग और ड्रॉप कार्यक्षमता का उपयोग करके खींचना चाहता हूं। सबकुछ बढ़िया काम करता है, सिवाय इसके कि मुझे अंत में पता चला कि क्रोम 28.0.1500.9 5 में, कैनवास की डिफ़ॉल्ट भूत छवि तब दिखाई नहीं दे रही है जब कैनवास इनलाइन-ब्लॉक div का बच्चा है। इस कम से कम काम कर रहे उदाहरण देखें:अप्रत्याशित एचटीएमएल 5 ड्रैग और ड्रॉप भूत छवि व्यवहार

<html> 
    <body> 
     <div style='display:inline-block'> 
      <canvas id='canvas1' width='100px' height='100px' draggable='true'></canvas> 
     </div> 

     <div> 
      <canvas id='canvas2' width='100px' height='100px' draggable='true'></canvas> 
     </div> 

     <script type="text/JavaScript"> 
      var canvas1, canvas2, context1, context2; 

      canvas1 = document.getElementById('canvas1'); 
      context1 = canvas1.getContext('2d'); 

      canvas2 = document.getElementById('canvas2'); 
      context2 = canvas2.getContext('2d'); 

      context1.fillText('no drag', 10, 30); 
      context2.fillText('yes drag', 10, 30); 
     </script> 
    </body> 
</html> 

एक भूत छवि प्रकट होता है जब मैं खींचें करने के लिए, लेकिन के लिए नहीं 'नहीं खींचें' 'हाँ खींचें' प्रयास करें। हालांकि, अगर मैं एक ड्रॉप लक्ष्य में भी चिपक जाता हूं, तो अनुपस्थित भूत के बावजूद, मैं इसे सामान्य रूप से 'ड्रैग' छोड़कर ट्रिगर कर सकता हूं। मैं समझना चाहता हूं कि क्यों भूत छवि माता-पिता के सीएसएस के आधार पर स्पष्ट रूप से गायब हो जाती है, या अगर यहां कुछ और चल रहा है - अग्रिम धन्यवाद!

उत्तर

0

यह हो सकता है हो सकता है बस Chrome में बग

तुम सिर्फ एक आसान के लिए देख रहे हैं, कुछ हद तक बुरा काम के आसपास यद्यपि (एक बार आप वास्तव में .setData(), फ़ायरफ़ॉक्स में काम करने लगता है): .setDragImage() स्पष्ट रूप से, के आधार पर कैनवास।

function dragstart(e) { 
    var di = new Image(); 
    di.src = this.toDataURL("image/png"); 
    e.dataTransfer.setDragImage(di, 10, 10); 
    // Run in firefox 
    e.dataTransfer.setData("text/plain", this.id); 
} 

Fiddle (आप छवि थोड़ा की स्थिति के साथ बेला के लिए चाहते हो सकता है)।

+0

हमम ठीक है, कामकाज काम करता है, लेकिन इस विषय पर सामान्य चुप्पी के आधार पर मुझे लगता है कि यह सिर्फ एक सादा पुरानी बग है। धन्यवाद! –

+0

उन्हें बताएं: http://crbug.com/new सबसे खराब हो सकता है, वे इसे अमान्य के रूप में बंद करते हैं और आपको बताते हैं कि क्यों और क्या करना है। ;) – nmaier

संबंधित मुद्दे