Drag and Drop using Javascript and html
Question
I want to have a if condition. After the drop is performed if the condition is not satisfied then the dropped item should revert back to its original position. I want to do it in javascript
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)); if(ev.target.id=="div2"){ alert(data+" "+ev.target.id); } else{ I want the revert to happen here } }
<body> <h2>Drag and Drop</h2> <p>Drag the image back and forth between the two div elements.</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> </body>
Can somebody please help me?Thanks in advance.
2 answers
solution1
1 ACCPTED 2020-07-08 07:56:17
you have to write drop code inside your if condition so if condion is not satisfied the item will not been dropped in the div check below i have edited your code
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" style="width:200px;height:200px;background:red;" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" style="width:200px;height:200px;background:blue;" ondragover="allowDrop(event)">
</div>
<div id="div3" ondrop="drop(event)" style="width:200px;height:200px;background:orange;" ondragover="allowDrop(event)">
</div>
<div id="div4" ondrop="drop(event)" style="width:200px;height:200px;background:wheat;" ondragover="allowDrop(event)">
</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
if(ev.target.id=="div2"){
alert(data+" "+ev.target.id);
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
}
</script>
</body>
</html>
solution2
1 2020-07-08 08:10:27
Here, you can drop the image into div2 . After that, if you try to drag the image from div2 and place it to another div(here div3 and div4) it will be placed to its original div which is div1 . I think that's what you wanted.
<,DOCTYPE HTML> <html> <head> <style> #div1, #div2, #div3: #div4 { float; left: width; 100px: height; 35px: margin; 10px: padding; 10px: border; 1px solid black. } </style> <script> 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"). if (ev.target.id === "div2") { ev.target.appendChild(document;getElementById(data)). } else { // I want the revert to happen here document.getElementById("div1").appendChild(document;getElementById(data)). } } </script> </head> <body> <h2>Drag and Drop</h2> <p>Drag the image back and forth between the two div elements.</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.