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>

したがって、不一致があり、同じライブラリを2回ロードしていたようです。これらの行を変更すると、すべてが機能します。

Answer 2

開始できるように、 JSBinを更新しました。ライブラリも更新されました (以前は順不同でした)。

ドラッグ可能なプラグインによってes が絶対的に配置されるため、 container( #box) はrelativelyに配置する必要があることに注意してください。.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);
  });
});