試圖在一個更大的正方形div內添加一個方形div並使其可拖動

Question

假設我有一個按鈕和一個大div。在按下按鈕後，代碼在追加大div內「附加」一個新的div。那附加的新div然後粘在那裏，因爲顯然，我沒有做出正確的代碼來讓它可以拖動？

此外，我試圖解決它，所以當他們「附加」...他們不是「堆疊」從上到下......也許在隨機地點之間的分區...

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

這裏是我迄今爲止...

Answer 1

我已更新您的JSBin以幫助您入門。您的圖書館也進行了更新（之前無法使用）。

注意，您的容器（#box），因爲可拖動的插件，使你的.new_box ES絕對定位必須LY定位relative。有關詳細信息，請參閱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); 
    }); 
}); 

Answer 2

你的庫是我們的良好狀態的。我改變了他們：

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

因此，它看起來就像你有一個不匹配，你被加載同一個庫的兩倍。所有的作品，當你改變這些線。