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.
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