He hecho un elemento de arrastrar y soltar. Quiero cambiar la posición del elemento tomándolo y arrastrándolo dentro de un div que permita la colocación. Aquí está el código para arrastrar y soltar:
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, #div2 { float: left; width: 200px; height: 300px; margin: 10px; padding: 10px; border: 1px solid black; } <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img class="poto" src="img_logo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>Aquí está el código de cambio de posición en jquery
<script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <script> $(function() { $(".ui-widget-content").draggable({ grid: [2, 2] }); }); </script> <img class="draggable ui-widget-content" class="poto" src="img_w3slogo.gif" draggable="true" id="drag1" width="88" height="31">Pero cuando uso ambos como el mismo código, esto no funciona.
por favor resuelvan este problema les estaré muy agradecido.
Puede usar la biblioteca jquery.ui.js para lo mismo, esto hace que su código sea muy simple biblioteca jquery-ui
consulte los documentos jquery-ui docs