How an image can be dragged and dropped multiple times with in div using jQuery and also image dropped with in dropped div?

Question

There are two div in my html. one to drag from and another to drop into. When i drag and drop an image, I am able to drag a particular image only once. I want following things..

I can drag the image again and again(cloning). If i drop the first image, it should take the same place. After that all the images should automatically append according to the shape(to the corners if possible) of droppable area.

Following is the current result:

Current result

Desired Output :

CSS

<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    img
    {
        height: auto;
        width: auto;
        max-width:100%;
        margin: 2px;
    }
    .draggable
    {
        filter: alpha(opacity=60);
        opacity: 0.6;
    }
    .dropped
    {
        position: static !important;
    }
    #dragged, #dropped
    {
        border: 1px solid #ccc;
        padding: 5px;
        min-height: 100px;
        width: 99%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #dragged .box:nth-child(2){
        order:2;
    }
    .box_wrap{
        margin-bottom:20px;
    }
    #dragged .box:nth-child(1){
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        flex-direction: column;
    }
    #dragged .box:nth-child(2){
        display: flex;
        align-items:center;
        justify-content: center;
    }
    #dropped {
        display: flex;
        align-items: center;
        min-height: 350px;
        background: #000;
        color: #fff;
    }
</style>

HTML Code

<div id="dragged">
    <div class="box">
        <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />
        <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />
        <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />
    </div>
    <div class="box">
        <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />
        <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />
        <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />        
    </div>
    <div class="box">
        <div class="box_wrap">
            <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />
            <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />    
        </div>
        <div class="box_wrap">
            <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />
            <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />    
        </div>
    </div> 
</div>

<hr />
    <div id="dropped">
</div>

Include Js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

Java Script Code

<script type="text/javascript">
    $(function () {
    $('#dragged img').draggable({
            stack: "#dragged .box img",
            helper: 'clone',
    });
    $('#dropped').droppable({
    accept: "#dragged .box img",
    drop: function(event, ui) {
    var droppable = $(this);
            var draggable = ui.draggable;
            // Move draggable into droppable
            var drag = $('.droppable').has(ui.draggable).length ? draggable : draggable.clone().draggable({
              revert: "invalid",
              stack: "#dragged .box img",
              helper: 'clone'
            });
            drag.appendTo(droppable);
             draggable.css({ float: 'left'});
            }
        });
    });
</script>    

Answer 1

It's a little unclear why you are using the various different jQuery UI Libraries. I would suggest you switch to just one specific library.

$(function() {
  function makeDrag(obj) {
    obj.draggable({
      revert: "invalid",
      stack: "#dragged .box img",
      helper: 'clone'
    });
    return obj;
  }
  $('#dragged img').draggable({
    stack: "#dragged .box img",
    helper: 'clone',
  });
  $('#dropped').droppable({
    accept: "img",
    drop: function(event, ui) {
      var droppable = $(this);
      var draggable = ui.draggable;
      var newImg = $("<img>", {
        src: draggable.attr("src")
      }).css("float", "left").appendTo(droppable);
      makeDrag(newImg);
    }
  });
});

.box {
  width: 100%;
  height: 310px;
}

.box img {
  float: right;
}

hr {
  clear: both;
}

#dropped {
  width: 100%;
  height: 310px;
  background-color: #000;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dragged">
  <div class="box">
    <img alt="" src="https://via.placeholder.com/30x100/0f0/fff.png" />
    <img alt="" src="https://via.placeholder.com/30x200/ff0/000.png" />
    <img alt="" src="https://via.placeholder.com/30x300/00f/fff.png" />
  </div>
</div>

<hr />
<div id="dropped">
</div>

One issue I suspect is the accept option, this should be one specific selector. Remember that the dragged item is just the final object and does not include it's parents. So if a img element is dragged from within .box, the object itself is still just img. So you will not want to include the parent selectors.

For the cloning, it's maybe just better to make a new image or element. Since the Source is cloned, it is removed when the User drops the item. It can often remove the target or effect the source.