jquery - 使用 jQuery 拖放时保留元素的副本

Question

我正在使用 Jquery 拖放功能，并且我想保留我正在拖动的元素的副本。

$('.draggable').draggable({
    revert: "invalid",
    stack: ".draggable"
    //helper: 'clone'
});
$('.droppable').droppable({
    accept: ".draggable",
    drop: function( event, ui ) {
    var droppable = $(this);
    var draggable = ui.draggable;
    // Move draggable into droppable
    draggable.appendTo(droppable);
    draggable.css({top: '5px', left: '5px'});
    }   
});

JSFiddle

因此，如果我将红色方 block 拖到灰色框中，红色方 block 的副本将保留在同一位置，并且我可以拖动任意数量的方 block 。

谢谢。

Answer 1

您可以clone()，然后附加元素

$('.draggable').draggable({
    revert: "invalid",
    stack: ".draggable",
    helper: 'clone'
});
$('.droppable').droppable({
    accept: ".draggable",
    drop: function (event, ui) {
        var droppable = $(this);
        var draggable = ui.draggable;
        // Move draggable into droppable
        draggable.clone().appendTo(droppable);
        //draggable.css({top: '5px', left: '5px'});
    }
});

$('.draggable').draggable({
  revert: "invalid",
  stack: ".draggable",
  helper: 'clone'
});
$('.droppable').droppable({
  accept: ".draggable",
  drop: function(event, ui) {
    var droppable = $(this);
    var draggable = ui.draggable;
    // Move draggable into droppable
    draggable.clone().appendTo(droppable);
    draggable.css({float:'left'});
  }
});

.draggable {
  width: 50px;
  height: 50px;
  background: red;
}
.droppable {
  width: 150px;
  height: 150px;
  background: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="droppable"></div>
<div class="draggable"></div>

更新:

$('.draggable').draggable({
  revert: "invalid",
  stack: ".draggable",
  helper: 'clone'
});
$('.droppable').droppable({
  accept: ".draggable",
  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: ".draggable",
      helper: 'clone'
    });
    drag.appendTo(droppable);
    draggable.css({
      float: 'left'
    });
  }
});

.draggable {
  width: 50px;
  height: 50px;
  background: red;
 
}
.droppable {
  width: 150px;
  height: 150px;
  background: lightgrey;
  margin: 5px; 
 display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="droppable"></div><div class="droppable"></div><div class="droppable"></div><div class="droppable"></div>
<div class="draggable"></div>