使用jQuery拖放时保留元素的副本 [英] Keep a copy of an element when using jQuery drag and drop

问题描述

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

I'm using Jquery drag and drop and I want to keep a copy of the element I'm dragging.

$('.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

所以如果我把红色的方块拖到灰色框中，红色方块的副本将保留在同一个地方，我可以拖动多少我想要的

So if I drag the red square to the grey box, a copy of the red square stays in the same place and I can drag as many as I want.

谢谢。

推荐答案

您可以 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>

这篇关于使用jQuery拖放时保留元素的副本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！