No busques más por otras páginas porque llegaste al espacio exacto, contamos con la solución que necesitas pero sin liarte.
Ejemplo: arrastrar y soltar
DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>DRAG_AND_DROPtitle><style>bodybackground-color:aquamarine;.whiteBoxheight:250px;width:250px;background-color:rgb(55,238,245);margin:10px;display: inline-block;border:2px solid red;.imgBoxdisplay: flex;background-image:url("image.jpg");height:230px;width:230px;position: relative;top:10px;margin:0 auto;cursor: pointer;.imgBox1display: flex;background-image:url("image.jpg");height:230px;width:230px;position: relative;top:10px;margin:0 auto;cursor: pointer;.holdborder:2px dashed rgb(118,182,0);.hidedisplay: none;.dragenterbackground:rgb(221,115,96);border-color:green;border-style: groove;style>head><body><divclass="whiteBox"><divclass="imgBox"draggable="true">div>div><divclass="whiteBox">div><divclass="whiteBox">div><divclass="whiteBox">div><script>console.log("D&D");let imgBox =document.querySelector(".imgBox");let whiteBoxes =document.querySelectorAll(".whiteBox");
imgBox.addEventListener("dragstart",(e)=>console.log("DRAG STARTED");
e.target.className+=" hold";setTimeout(()=>
e.target.className+=" hide";,0););
imgBox.addEventListener("dragend",(e)=>console.log("DRAG ENDED");
e.target.className="imgBox";);for(whiteBox of whiteBoxes)
whiteBox.addEventListener("dragover",(e)=>
e.preventDefault();// console.log("gj"));
whiteBox.addEventListener("dragenter",(e)=>
e.target.className+=" dragenter";);
whiteBox.addEventListener("dragleave",(e)=>
e.target.className="whiteBox";);
whiteBox.addEventListener("drop",(e)=>let answer=confirm("Do you really want to move it")console.log(answer)if(answer)
e.target.append(imgBox)else
e.target.className="whiteBox";);script>body>html>Aquí puedes ver las comentarios y valoraciones de los usuarios
Te invitamos a añadir valor a nuestra información asistiendo con tu experiencia en las referencias.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)