<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Drag</title> <script src="static/jquery-3.5.1.js"></script> <script src="static/jquery-ui.min.js"></script> <link rel="stylesheet" href="static/style.css"> </head> <body> <!-- container --> <div class="container"> <div class="main-canvas"> <div class="box card1" name="card1">1 up <p style="font-size: 10px">100</p> </div> <div class="box card2">2</div> <div class="box card3">3</div> <div class="box card4">4</div> <div class="box card5">5</div> <div class="box card6">6</div> <div class="box card7">7</div> <div class="box card8">8</div> <div class="box card9">9</div> </div> </div><!-- container --> <script> $(document).ready(function () { var box = $(".box"); var mainCanvas = $(".main-canvas"); box.draggable({ containment: mainCanvas, helper: "clone", start: function () { $(this).css({ opacity: 0 }); $(".box").css("z-index", "0"); }, stop: function () { $(this).css({ opacity: 1 }); } }); box.droppable({ accept: box, drop: function (event, ui) { var draggable = ui.draggable; var droppable = $(this); var dragPos = draggable.position(); var dropPos = droppable.position(); console.log(dropPos); draggable.css({ left: dropPos.left + "px", top: dropPos.top + "px", "z-index": 20 }); droppable.css("z-index", 10).animate({ left: dragPos.left, top: dragPos.top }); } }); }); </script> </body> </html>