Question

下面是一些使用jQuery的代码。单击按钮将复制原始矩形。

如何使所有矩形都可拖动？

CSS：

.my_rectangle {
  width: 200px;
  background: pink;   
}

HTML：

<div id="original_rectangle" class="my_rectangle">original rectangle</div>
<button id="copy_button">Copy</button>

使用Javascript：

var count = 1
$("#copy_button").click(function() {
  copy = $("#original_rectangle").clone()
  copy.removeAttr("id").html("copy " + count).appendTo("body")
  count += 1
})

（致谢：感谢用户Haochi提供原始版本的代码。）

Answer 1

我建议将jQuery UI库用于draggables，否则你最终会重新实现他们所做的大部分事情。

http://jqueryui.com/demos/draggable/

创建一个draggble看起来像这样：

$("#original_rectangle").draggable();

Answer 2

如果你使用jQueryUI，它看起来像这样：

var count = 1
$("#copy_button").click(function() {
  copy = $("#original_rectangle").clone()
  copy.removeAttr("id").addClass("dragMe ui-widget-content").html("copy " + count).appendTo("body")
  count += 1
})

$("dragMe").draggable();

Answer 3

考虑使用jQueryUI。查看他们的draggable演示，看看它是否正在寻找。

Answer 4

改变这个：

copy.removeAttr("id").html("copy " + count).appendTo("body")

......对此：

copy.removeAttr("id").html("copy " + count).appendTo("body").draggable();

这假设您正在使用jQuery UI库。

另外，以分号终止语句是个好主意。 JavaScript的自动分号插入有时会导致棘手的错误。经典的例子：

function f(){
  return
  {
    some : 'value'
  }
}

当然，在此示例中，括号样式与分号插入密谋以产生歧义，因此它是针对分号插入和在新行上放置左括号的参数。

如何更改一些jQuery代码以使矩形可拖动？

4 个答案: