मैं तत्व की सूची पर ड्रैग एन ड्रॉप सिस्टम बनाना चाहूंगा। यहाँ मैं क्या उम्मीद कर रहा हूँ की एक तस्वीर:
मैं लाल वर्ग 1 लेना चाहता हूं, इसे पहले डाल दियावर्ग काला। और अगर मैं लाल वर्ग 2 लेता हूं और मैंने इसे काले वर्ग 1 में रखा है, तो यह लाल वर्ग 1 (जो कि लाल वर्गों की सूची में वापस जाता है) को हटा देता है और इसके स्थान पर लाल वर्ग 2 डाल देता है।
यहाँ मैं क्या कोशिश कर रहा हूँ, लेकिन यह काम नहीं करता है!
एचटीएमएल:
<ul class="list-inline">
<li><div id="drag1" draggable="true" ondragstart="drag(event)"> ceci est un test 1</div></li>
<li><div id="drag1" draggable="true" ondragstart="drag(event)"> ceci est un test 2</div></li>
<li><div id="drag1" draggable="true" ondragstart="drag(event)"> ceci est un test 3</div></li>
</ul>
jquery:
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));
}
आपकी सहायता के लिए धन्यवाद !
उत्तर:
जवाब के लिए 0 № 1चेंज आईडी के रूप में एप्लिकेशन समझ नहीं पा रहा है कि आप किस ब्लॉक को खींचने की कोशिश कर रहे हैं
<ul class="list-inline">
<li><div id="drag1" draggable="true" ondragstart="drag(event)"> ceci est un test 1</div></li>
<li><div id="drag2" draggable="true" ondragstart="drag(event)"> ceci est un test 2</div></li>
<li><div id="drag3" draggable="true" ondragstart="drag(event)"> ceci est un test 3</div></li>
</ul>