How to drag image inside div?

Hello I have a problem with Drag an Drop.
How to drag and drop image inside div like page builders? I have no idea about it.enter image description here

Solution

here is a code for dragging the image into a div file. you need to give your image a class named draggable and your div a class named droppable and call it from jquery by these class names.

     <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="a.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="hp-product-item">
       <img class="draggable" style="height:500px;width:500px;" src="https://images.unsplash.com/photo-1516703914899-e8303d01329a?ixlib=rb-0.3.5&s=9ebf86cdab3a1c7319ff15b16d09b1f7&auto=format&fit=crop&w=1350&q=80">
       <div class="droppable" style="direction:rtl;height:500px;width:500px;border:5px solid black;">drop the image here</div>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script>
    $('.draggable').draggable({
    cursor: 'move',
    revert: 'invalid',
    helper: 'original',

    start: function (event, ui)
    {


        $(this).parent().find('#adminTimeReservation').css('display','block');

    },
    drag: function (event, ui)
    {
    }

    });//draggable
    $('.droppable').droppable({
        drop: function(ev, ui) {
            $(this).prepend(ui.draggable);
              ui.draggable.position({
                my: 'right top',
                at: 'right top',
                of: this
              });


        }    
    });//droppable
    </script>
  </body>
</html>

the documentation of what elements i used is int this link https://jqueryui.com/draggable/