尝试在较大的div内附加一个div并使其可拖动

Question

假设我有一个按钮和一个大div。 按下按钮后，代码将在大div内“追加”一个新的div。 然后，将新添加的div停留在该位置，因为显然，我没有编写正确的代码以使其可拖动？

另外，我正在尝试对其进行修复，以便当它们“附加”时...不会从上到下“堆叠” ...也许在div之间的随机位置...

http://jsbin.com/obizel/3/

到目前为止，这就是我所拥有的...

Answer 1

您的图书馆是我们的基础。 我将它们从：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"</script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

至：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>

因此，看起来您不匹配，并且两次加载了相同的库。 当您更改这些行时，所有方法均有效。

Answer 2

我已经更新了您的JSBin，以帮助您入门。 您的库也已更新（之前不存在问题）。

注意，您的container（ #box ）必须relative放置，因为可拖动插件使您的.new_box绝对.new_box 。 有关详细信息，请参见CSS。

新的JS：

$(document).ready(function () {
  function createBox($parent, left, top) {
    var $box = $('<div class="new_box">Hello world</div>');
    $box.appendTo($parent);
    $box.draggable({
      containment: $parent,
      grid: [10, 10]
    });
    $box.css({
      left: left,
      top: top
    });
  }

  $(".add").click(function (e) {
    var $container = $("#box"),
      w = $container.width(),
      h = $container.height();

    createBox($container, Math.random() * w, Math.random() * h);
  });
});