Javascript Jquery通过输入字段中的值创建Dynmica可拖动元素

我试图使用jquery动态创建一组可拖动的

div

，其中包含带有数字标签的输入字段和编辑标签的选项

用户将输入所需的

div的编号

，然后点击create。我不希望

div的

出现在页面加载上，而是希望用户请求

div的数量“

，然后按钮创建它们

我可以动态创建

div的

，但我无法拖动。我还想在页面加载时删除

div的

。它们应该仅在用户提交请求后显示

查看到目前为止我拥有的：

#
根据此问题/答案创建：
 # <input type="text" id="num" name="more" value=''>
 <button type="button" id="more" name="more">Create</button
 <br>
 <br>
 <div class="container" id="inputcontainer">
<div class="bl blue draggable"><input type="text" /></div>
<div class="bl coral draggable"><input type="text" /></div>
<div class="bl pink draggable"><input type="text" /></div>
 </div>

 <script>
 $(document).ready(function () {

$('.container').on('click', '.pink', function () {
    $("<div class='bl pink'></div>").appendTo('.container').draggable();
});

$('.container').on('click', '.blue', function () {
    $("<div class='bl blue'></div>").appendTo('.container').draggable();
});
$('.container').on('click', '.coral', function () {
    $("<div class='bl coral'></div>").appendTo('.container').draggable();
});

$(".draggable").draggable();


 });

 function createMore(){
var num = $('#num').val();
for( var i = 0; i < num; i++ ) {
    $("#inputcontainer").append("<div class='bl blue draggable'></div>");

}
 }
 $("#more").click(".add",createMore);
 </script>


<style>
html, body {
margin:0px;
padding:0px;
width:auto;
height:auto;
}
.container {
margin:20px;
}
.bl {
width:200px;
height:200px;
border-radius:10px;
display:block;
margin:5px;
float:left;
}
.pink {
background-color:#D91C5C;
}
.blue {
background-color:#00ADEE;
}
.coral {
background-color:#EE4036;
}
</style>