javascript - 如何使用 jQuery 在 div 中多次拖放图像以及在 dropped div 中拖放图像？

Question

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

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

当前结果如下:

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

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