ड्रॉप लक्ष्य आईडी

Question

के बजाय ड्रॉप तत्व आईडी प्राप्त करें मैं jQuery के लिए बिल्कुल नया हूं और छवि तत्व स्वयं या ड्रॉप लक्ष्य आईडी के बजाय ड्रॉप लक्ष्य में संलग्न करने के लिए एक ड्रैग किए गए छवि तत्व आईडी प्राप्त करने की कोशिश कर रहा हूं। मैं html5 देशी डीएनडी का उपयोग कर रहा हूँ। और अब तक मैं ड्रैग फ़ंक्शन में डेटाट्रैंसर विधि और ड्रॉप में गेटडाटा फ़ंक्शन के साथ अपनी आईडी को भेजकर तत्व को जोड़ सकता हूं। जब भी मैं उस आईडी को ड्रॉप से ​​कॉल करने का प्रयास करता हूं, हालांकि इसे ड्रैग किए गए तत्वों के बजाय ड्रॉप लक्ष्य आईडी प्राप्त होता है।

किसी भी मदद की बहुत सराहना की जाएगी क्योंकि मैंने पूरी तरह से ऑनलाइन खोज की है और ड्रॉप क्षेत्र की लक्षित आईडी प्राप्त करने के लिए और अधिक तरीकों के अलावा कुछ भी नहीं मिला है।

function allowDrop(ev) { 
ev.preventDefault(); 
} 

function dragStart(ev) { 

ev.dataTransfer.setData('Text/html', ev.target.id); // sends the dragged images data. 

//alert(ev.target.id); // alerts the correct id of the dragged image. 

} 


function drop(ev) { 

ev.preventDefault(); 
var data = ev.dataTransfer.getData("text/html");//retrieves dropped images data. 
ev.target.appendChild(document.getElementById(data));//this displays the dropped image. 

//alert(ev.target.id); // alerts the id of the drop target(Want to get the dropped images id.) 

//$("#mybillets").append("<span>"+ev.target.id+" </span>"); //appends the drop targets id(Want to append the dropped images id.) 
} 

Answer 1

drop विधि में ev की तरह लग रहा है घटना वस्तु है, तो ev.target तत्व है जिस पर आइटम हटा दिया गया था के पास भेजेगा: यहाँ मेरे वर्तमान कोड बेला का एक टुकड़ा है।

तो ड्रॉप लक्ष्य आईडी का संदर्भ देने के लिए ev.target.id का उपयोग करें।

function allowDrop(ev) { 
 
    ev.preventDefault(); 
 
} 
 

 
function drag(ev) { 
 
    ev.dataTransfer.setData('Text/html', ev.target.id); 
 
} 
 

 
function drop(ev, target) { 
 
    ev.preventDefault(); 
 
    console.log(target.id, ev.target.id) 
 

 
    var data = ev.dataTransfer.getData("text/html"); 
 
    alert(data) 
 
}

#div1 { 
 
    width: 350px; 
 
    height: 70px; 
 
    padding: 10px; 
 
    border: 1px solid #aaaaaa; 
 
}

<div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div> 
 
<br/> 
 
<img id="drag1" src="//placehold.it/336X69/ff0000" draggable="true" ondragstart="drag(event)" width="336" height="69" />

Answer 2

@Arun पी जॉनी के लिए धन्यवाद। इस सरल उदाहरण पर उत्कृष्ट काम।

हालांकि, मैं बस यह जोड़ना चाहता था कि यदि आप "ए" टैग से कोशिश करते हैं और खींचते हैं, तो आपको बहुत भाग्य नहीं होगा।

यह नहीं काम करेगा (सभी ब्राउज़रों में):

<a draggable="true" ondragstart="drag(event)" id="drag1" href="#"> 
<img src="//placehold.it/336X69/ff0000" width="336" height="69" /> 
</a> 

हालांकि इस (अधिक ब्राउज़रों में) काम करेगा:

<img draggable="true" ondragstart="drag(event)" id="drag1" src="//placehold.it/336X69/ff0000" width="336" height="69" /> 

यह मैं इस बाहर की खोज के लिए काफी समय लगा , क्योंकि कई ब्राउज़र वापस नहीं आते हैं या आपको खींचने वाले चीज़ों की स्रोत आईडी प्राप्त करने देते हैं। यह उदाहरण सांत्वना एक चेतावनी में आप के लिए स्रोत आईडी प्रकट है और यह भी चाहिए: आप नाम के एक चर में डोम तत्व है, तो

<script> 
    function allowDrop(ev) { 
     ev.preventDefault(); 
    } 

    function drag(ev) { 
     ev.dataTransfer.setData('text', ev.target.id); 
    } 

    function drop(ev, target) { 
     ev.preventDefault(); 
     console.log(target.id + " : " + ev.target.id) 
     console.log(ev.dataTransfer.getData("text/html")); 
     console.log(ev.dataTransfer.getData("text")); 
     var data = ev.dataTransfer.getData("text"); 
     alert(data) 
    } 
</script> 
<style "type="text/css"> 
     #div1 
     { 
      width: 350px; 
      height: 70px; 
      padding: 10px; 
      border: 1px solid #aaaaaa; 
     } 
</style> 

<div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div> 
<br/> 
<img id="drag1" src="http://placehold.it/336X69/ff0000" draggable="true" ondragstart="drag(event)" width="336" height="69" />