如何在拖放时克隆 div 而不是在拖动开始时克隆

Posted 2023-05-08

【中文标题】如何在拖放时克隆 div 而不是在拖动开始时克隆

【英文标题】：How to clone a div when it's dropped and not when drag start

【发布时间】：2018-03-04 19:01:31

【问题描述】：

通过使用 jQuery UI，我想只在删除时创建某个 div 的克隆。当您开始拖动并准备再次拖动时，应该将这个 div 克隆在同一点。

例如在这个fiddle 中是否可以克隆绿色元素，在初始位置，只有当它们被丢弃时？

这是我的 JS：

$(function() 
  $("#dragrabble-one").draggable(
    helper: 'clone'
  );
  $("#dragrabble-two").draggable(
    helper: 'clone'
  );
  $("#dragrabble-three").draggable(
    helper: 'clone'
  );
  $("#dragrabble-four").draggable(
    helper: 'clone'
  );
  $("#dragrabble-five").draggable(
    helper: 'clone'
  );
  $("#dragrabble-six").draggable(
    helper: 'clone'
  );
  $("#dragrabble-seven").draggable(
    helper: 'clone'
  );
  $("#dragrabble-eight").draggable(
    helper: 'clone'
  );
  $("#dragrabble-one").draggable(
    revert: "invalid"
  );
  $("#dragrabble-two").draggable(
    revert: "invalid"
  );
  $("#dragrabble-three").draggable(
    revert: "invalid"
  );
  $("#dragrabble-four").draggable(
    revert: "invalid"
  );
  $("#dragrabble-five").draggable(
    revert: "invalid"
  );
  $("#dragrabble-six").draggable(
    revert: "invalid"
  );
  $("#dragrabble-seven").draggable(
    revert: "invalid"
  );
  $("#dragrabble-eight").draggable(
    revert: "invalid"
  );
  $("#droppable-box").droppable(
    drop: function(event, ui) 
      var clone = ui.helper.clone();
      clone.draggable();
      clone.appendTo('#droppable-box');
    
  );
);

【参考方案1】：

我认为克隆后需要重新初始化可拖动元素，我已经更改了JS函数drop参考下面的代码。

$("#droppable-box").droppable(
    drop: function(event, ui) 
      var clone = ui.helper.clone();
      clone.appendTo('#droppable-box');
      clone.draggable(
        helper: "clone"
      );
    
  ); 

$(function() 
  $("#dragrabble-one").draggable(
    helper: 'clone'
  );
  $("#dragrabble-two").draggable(
    helper: 'clone'
  );
  $("#dragrabble-three").draggable(
    helper: 'clone'
  );
  $("#dragrabble-four").draggable(
    helper: 'clone'
  );
  $("#dragrabble-five").draggable(
    helper: 'clone'
  );
  $("#dragrabble-six").draggable(
    helper: 'clone'
  );
  $("#dragrabble-seven").draggable(
    helper: 'clone'
  );
  $("#dragrabble-eight").draggable(
    helper: 'clone'
  );
  $("#dragrabble-one").draggable(
    revert: "invalid"
  );
  $("#dragrabble-two").draggable(
    revert: "invalid"
  );
  $("#dragrabble-three").draggable(
    revert: "invalid"
  );
  $("#dragrabble-four").draggable(
    revert: "invalid"
  );
  $("#dragrabble-five").draggable(
    revert: "invalid"
  );
  $("#dragrabble-six").draggable(
    revert: "invalid"
  );
  $("#dragrabble-seven").draggable(
    revert: "invalid"
  );
  $("#dragrabble-eight").draggable(
    revert: "invalid"
  );
  $("#droppable-box").droppable(
    drop: function(event, ui) 
      var clone = ui.helper.clone();
      clone.appendTo('#droppable-box');
      clone.draggable(
        helper: "clone"
      );
    
  );
);

.box 
  height: 30px;
  width: 50px;
  border: 1px solid black;
  background: green;


#droppable-box 
  height: 400px;
  width: 200px;
  border: 1px solid black;
  background: lightgray;


.container 
  border: 1px solid black;
  float: left;
  margin: 0 5px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />

<span>Drag green boxes onto gray dropzone</span>

<div class="container">
  <div class="box" id="dragrabble-one"></div>
  <br />
  <div class="box" id="dragrabble-two"></div>
  <br />
  <div class="box" id="dragrabble-three"></div>
  <br />
  <div class="box" id="dragrabble-four"></div>
  <br />
  <div class="box" id="dragrabble-five"></div>
  <br />
  <div class="box" id="dragrabble-six"></div>
  <br />
  <div class="box" id="dragrabble-seven"></div>
  <br />
  <div class="box" id="dragrabble-eight"></div>
  <br />
</div>

<div class="container">
  <div id="droppable-box">Drop Zone</div>
</div>

【讨论】：

问题在于，使用这个 JS 元素被克隆到可放置区域，而不是在与开头（左）拖动的位置相同的位置

@GoePorsh 问题含糊不清，你怎么说从丢弃区克隆？您能否通过在可拖动元素中添加文本并为读者突出显示问题来正确描述问题？