आप कैसे सेट करते हैं setDragImage

Question

को कैसे बंद करते हैं। आप ड्रैग छवि को कैसे अक्षम करते हैं। मेरे पास एक फ़्लोटिंग पैनल है और ड्रैग छवि बहुत खराब दिखती है। कृपया कोई jquery कृपया।

Answer 1

MDN से:

तो नोड एक HTML img तत्व, एक HTML canvas तत्व या एक XUL image तत्व है, छवि डेटा प्रयोग किया जाता है। अन्यथा, image एक दृश्य नोड होना चाहिए और ड्रैग छवि इस से बनाई जाएगी।

इससे यह ड्रैग छवि को "बंद" करने के लिए पालन करेगा, आपको setDragImage पर केवल खाली (लेकिन दृश्यमान) तत्व को पास करना होगा। कैसे इस बारे में:

// create an empty <span> 
var dragImgEl = document.createElement('span'); 

// set its style so it'll be effectively (but not technically) invisible and 
// won't change document flow 
dragImgEl.setAttribute('style', 
    'position: absolute; display: block; top: 0; left: 0; width: 0; height: 0;'); 

// add it to the document 
document.body.appendChild(dragImgEl); 

// your DataTransfer code here--assume we put it in a variable called 'dt' 

dt.setDragImage(dragImgEl, 0, 0); 

एक खाली <span> किसी कारण आप हमेशा <img src="blank.png"/> इस्तेमाल कर सकते हैं जहां blank.png एक पारदर्शी 1 पिक्सेल पीएनजी है के लिए काम नहीं करता है। उम्मीद है की वो मदद करदे!

Answer 2

डेटा स्ट्रिंग का उपयोग

सूत्र में एक टिप्पणी से प्रेरणा ली एक पारदर्शी 1x1px gif करने के लिए भूत छवि सेट करें, फिर भी छवि है कि वे अपने टिप्पणी में डाल इतना काम नहीं किया मैं के लिए चारों ओर दस्त पड़ा यह वाला।

यह सभी समस्याओं में मेरी समस्या हल करता है।

element.ondragstart = function (ev) { 
    var img = document.createElement('img') 
    img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' 
    ev.dataTransfer.setDragImage(img, 0, 0) 
}