Question

我正在尝试使用jquery动态创建一组可拖动的div's，其中包含带有数字标签的输入字段和用于编辑标签的选项。

用户将输入他们想要的div's个数，然后点击创建。我不希望div's出现在页面加载上，而是希望用户请求div's"的数量，然后按钮创建它们。

我可以动态创建div's，但我无法拖动。我还想删除页面加载div's。它们只应在用户提交请求后出现。

查看我到目前为止的内容：

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

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

0 个答案: