ड्रॉप पर कई तत्वों को दृश्यमान बनाएं

Question 1

मेरे पास एक कोड है जिसमें आईडी drag1, drag2, drag3 के साथ तीन छवि स्रोत खींचे जा सकते हैं और div1 पर गिराए जा सकते हैं।

मेरी समस्या यह है कि दूसरी और तीसरी छवि को छोड़ने पर यह #div1 . में दिखाई नहीं दे रहा है

ड्रॉप पर दिखाई देने वाली दूसरी और तीसरी छवि कैसे बनाएं?

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

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));

}

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

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://picsum.photos/200" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag2" src="https://picsum.photos/200/300?image=0" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag3" src="https://picsum.photos/200/300/?gravity=east" draggable="true" ondragstart="drag(event)" width="336" height="69">

javascript html drag-and-drop

2

wtp 27 पद 2018, 11:34

Answer

वास्तव में आपके वास्तविक कोड में कोई समस्या नहीं है, और यह 3 images के साथ भी वैसा ही व्यवहार कर रहा है।

समस्या यह है कि आपके div में केवल 70px के रूप में height है, इसलिए केवल पहली छवि दिखाई दे सकती है और दूसरे दो तत्व div के अंदर हैं लेकिन स्क्रीन पर प्रदर्शित नहीं होते हैं , आप डिव height को बदलकर या सामग्री के साथ इसे स्ट्रेच करके ठीक कर सकते हैं।

डेमो:

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

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));

}

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

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://picsum.photos/200" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag2" src="https://picsum.photos/200/300?image=0" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag3" src="https://picsum.photos/200/300/?gravity=east" draggable="true" ondragstart="drag(event)" width="336" height="69">

2

cнŝdk 27 पद 2018, 12:11

Question 2

वास्तव में आपके वास्तविक कोड में कोई समस्या नहीं है, और यह 3 images के साथ भी वैसा ही व्यवहार कर रहा है।

समस्या यह है कि आपके div में केवल 70px के रूप में height है, इसलिए केवल पहली छवि दिखाई दे सकती है और दूसरे दो तत्व div के अंदर हैं लेकिन स्क्रीन पर प्रदर्शित नहीं होते हैं , आप डिव height को बदलकर या सामग्री के साथ इसे स्ट्रेच करके ठीक कर सकते हैं।

डेमो:

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

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));

}

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

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://picsum.photos/200" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag2" src="https://picsum.photos/200/300?image=0" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag3" src="https://picsum.photos/200/300/?gravity=east" draggable="true" ondragstart="drag(event)" width="336" height="69">

2

cнŝdk 27 पद 2018, 12:11

ड्रॉप पर कई तत्वों को दृश्यमान बनाएं

1 उत्तर

संबंधित सवाल

नए सवाल