如何使用 div 使用 jQuery 多次拖放图像，以及如何使用 in dropped div 拖放图像？

Question

我的html里有两个div。一个拖出另一个掉入。当我拖放图像时，我只能拖动特定图像一次。我想要以下东西..

我可以一次又一次地拖动图像（克隆）。如果我放下第一张图片，它应该放在同一个地方。之后所有的图像应该根据可放置区域的形状（如果可能的话到角落）自动附加。

当前结果如下：

Current result

期望的输出：

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 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 选项有一个问题，这应该是一个特定的选择器。请记住，拖动的项目只是最后的 object，不包括它的 parent。因此，如果从 .box 中拖动 img 元素，object 本身仍然只是 img。所以你不会想要包括 parent 选择器。

对于克隆，制作一个新的图像或元素可能会更好。由于源已被克隆，因此当用户放下项目时它会被删除。它通常可以删除目标或影响源。

如何使用 div 使用 jQuery 多次拖放图像，以及如何使用 in dropped div 拖放图像？

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

javascript

jquery

jquery-ui

jquery-plugins

jquery-ui-draggable