Question

我有一个可拖动的div，我想通过点击一个按钮来复制它。

请注意fiddle。

我试过了：

$('#drag').clone(true).appendTo('body');

和

$('#drag').clone(true).draggable().appendTo('body');

为什么克隆元素没有可拖动？为什么当我拖动克隆元素时，原始元素会移动？

Answer 1

如果为<?php $Id=2; $invoe = 'T'.date('y').date('m').str_pad($Id,3,'0',STR_PAD_LEFT); echo $invoe; ?>方法的第一个参数指定true，则所有数据和事件都将复制为documentation states。因此，如果您不复制可拖动的事件侦听器，则应省略第一个参数（因为它将默认为.clone()）：

Updated Example

false

$('.drag').draggable();

$('#button').on('click', function() {
  $('.drag:first').clone().draggable().appendTo('body');
});

$('.drag').draggable();

$('#button').on('click', function() {
  $('.drag:first').clone().draggable().appendTo('body');
});

.drag {
  width: 100px;
  height: 100px;
  background: deeppink;
}

或者，如果您需要保留元素的数据和事件，则可以在通过调用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <button id="button">duplicate</button> <div class='drag'></div>选项克隆之前暂时删除元素的可拖动功能。从那里，您可以在克隆元素附加到文档后重新初始化可拖动功能：

Updated Example

destroy

作为旁注，假设$('.drag').draggable(); $('#btn').on('click', function() { $('.drag:first').draggable("destroy").clone(true).appendTo('body'); $('.drag').draggable(); });在文档中是唯一的。因此，我在上面的例子中使用了一个类。

id

$('.drag').draggable();

$('#btn').on('click', function() {
  $('.drag:first').draggable("destroy").clone(true).appendTo('body');

  $('.drag').draggable();
});

.drag {
  width: 100px;
  height: 100px;
  background: deeppink;
}

单击按钮克隆jQuery UI可拖动元素

1 个答案: