javascript - 尝试在更大的方形 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) 必须定位为relatively，因为可拖动插件使您的.new_boxes 绝对定位。有关详细信息，请参阅 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);
  });
});