点击按钮克隆一个jQuery UI可拖动元素

Question

我有一个可拖动的

，我想通过点击按钮来复制它。

请查看此示例。

我尝试过：

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

并且

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

为什么克隆的元素不能拖动？当我拖动克隆元素时原始元素为什么也会移动？

- cool

Answer 1

如果你将.clone()方法的第一个参数设为true，那么所有数据和事件都会被复制，就像文档中所述一样。因此，如果不希望可拖动事件监听器被复制，应省略第一个参数（因为默认值为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>

---

或者，如果你需要保留元素的数据和事件，那么可以在克隆之前通过调用destroy选项暂时删除元素的可拖动功能。然后，在将克隆的元素添加到文档后，可以重新初始化可拖动功能：

更新的示例

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

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

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

作为一个侧面说明，id应该在文档中是唯一的。因此，在上面的示例中我使用了一个类(class)来代替。

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

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

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

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

<div class="drag"></div>

<button id="btn">duplicate</button>

- Josh Crozier

---

谢谢 @Josh，它非常好用，不过有一个简单的问题：那么没有其他方法可以在不移除draggable的情况下实现吗？ - cool

@cool - 我更新了答案...你可以在clone()方法中省略第一个参数（当指定为true时，元素的事件/数据也会被克隆，这就是为什么可拖动功能被复制的原因）。不过我不确定这是否有帮助，因为你可能想要复制事件。 - Josh Crozier

第一个答案很棒，但更新的示例（简短的那个）正是我所需要的，我要说“现在你说对了”，非常感谢@Josh。 - cool