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

Posted 2023-05-08

【中文标题】如何使用 jQuery 在 div 中多次拖放图像以及在 drop div 中拖放图像？

【英文标题】：How an image can be dragged and dropped multiple times with in div using jQuery and also image dropped with in dropped div?

【发布时间】：2020-02-04 15:06:05

【问题描述】：

我的 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  src="https://via.placeholder.com/300/09f/fff.png" />
        <img  src="https://via.placeholder.com/300/09f/fff.png" />
        <img  src="https://via.placeholder.com/300/09f/fff.png" />
    </div>
    <div class="box">
        <img  src="https://via.placeholder.com/300/09f/fff.png" />
        <img  src="https://via.placeholder.com/300/09f/fff.png" />
        <img  src="https://via.placeholder.com/300/09f/fff.png" />        
    </div>
    <div class="box">
        <div class="box_wrap">
            <img  src="https://via.placeholder.com/300/09f/fff.png" />
            <img  src="https://via.placeholder.com/300/09f/fff.png" />    
        </div>
        <div class="box_wrap">
            <img  src="https://via.placeholder.com/300/09f/fff.png" />
            <img  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>    

【参考方案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  src="https://via.placeholder.com/30x100/0f0/fff.png" />
    <img  src="https://via.placeholder.com/30x200/ff0/000.png" />
    <img  src="https://via.placeholder.com/30x300/00f/fff.png" />
  </div>
</div>

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

我怀疑的一个问题是accept 选项，这应该是一个特定的选择器。请记住，拖动的项目只是最终对象，不包括它的父项。因此，如果从.box 中拖动img 元素，则对象本身仍然只是img。所以你不会想要包含父选择器。

对于克隆，制作一个新的图像或元素可能会更好。由于 Source 是克隆的，因此在用户丢弃该项目时将其删除。它通常可以移除目标或影响源。