Как изображение можно перетаскивать и удалять несколько раз с помощью div, используя jQuery, а также изображение, которое можно перетаскивать с помощью drop div?

Question

В моем html есть два div. одного перетащить с другогоКогда я перетаскиваю изображение, я могу перетащить определенное изображение только один раз. Я хочу следующие вещи ..

Я могу перетаскивать изображение снова и снова (клонирование). Если я уроню первое изображение, оно должно занять то же место. После этого все изображения должны автоматически добавляться в соответствии с формой (по возможности, в углы) области опускания.

Ниже приводится текущий результат:

Текущий результат

Желаемый результат:

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-код

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

Включает 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

<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

Немного неясно, почему вы используете различные библиотеки jQuery UI. Я бы посоветовал вам перейти только на одну конкретную библиотеку.

$(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>

Одна проблема, которую я подозреваю, это опция accept, это должен быть один конкретный селектор. Помните, что перетаскиваемый элемент является только конечным объектом и не включает его родителей. Таким образом, если элемент img перетаскивается из .box, сам объект по-прежнему просто img. Таким образом, вы не захотите включать родительские селекторы.

Для клонирования, возможно, просто лучше создать новое изображение или элемент. Поскольку Источник клонирован, он удаляется, когда Пользователь удаляет элемент. Он может часто удалять цель или влиять на источник.