jQuery - 仅在删除时克隆 div答案

【问题标题】：jQuery - Clone div only when droppedjQuery - 仅在删除时克隆 div
【发布时间】：2018-03-03 22:47:03
【问题描述】：

如何仅在删除时创建某个 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');
    }
  });
});

提前致谢。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-droppable

【解决方案1】：

一个，一种解决方案是，在用户开始拖动元素时隐藏不透明度等于 0 的克隆元素，并在拖动停止时将不透明度设置回 1。

$("#dragrabble-one").draggable({

    helper: 'clone',
    start: function (event, ui){
        $(this).css('opacity','0');
    },
    stop: function (event, ui){
        $(this).css('opacity','1');
    }

});

希望对您有所帮助！ :)

【讨论】：