change position of draggable element with mouse dragging and releasing

Question

I have made a drag and droppable element. I want to change the position of the element by grabbing it and dragging it inside a div that allows the drop. Here is the code to drag and drop:

 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>

Here is the position change code in 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">

But when I use both as the same code this does not work.

please solve this problem I'll be very thankful to you.

Answer 1

You can use jquery.ui.js library for the same this make your code very simple jquery-ui library

please refer docs jquery-ui docs