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

因此，如果我将红色方块拖到灰色框中，红色方块的副本会保留在同一个位置，我可以拖动任意多个。

感谢。

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'});
    }
});

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

更新：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您设置revert: true, revertDuration: 0,以保持位置。

$('.draggable').draggable({
    revert: true,
    revertDuration: 0,
    stack: ".draggable"
    //helper: 'clone'

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

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

2 个答案: