从菜单列表中删除后动态添加元素
dynamically add the element after dropping it from menu list
https://jsfiddle.net/UdayKumar/rm5ey912/2/
我已经复制了工作演示。
从左侧拖动元素并放到右侧。 div 必须动态改变它的宽度和高度。关于删除不同的元素,我想动态添加元素,如单选按钮、复选框、文本字段等。有人可以帮助我吗??
<!doctype html>
<head>
<title>Form Builder</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
<script src="jQuery.min.js"></script>
<script src="jQuery.ui.js" type="text/javascript"></script>
<script src="myscript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="Title"> <img src="" width="200" height="70" ></div>
<div id="listOfItems">
<div id="Heading" class="block">Heading
<div class="close">X</div>
</div>
<div id="txtbox" class="block">Text Box
<div class="close">X</div>
</div>
<div id="txtfield" class="block">Text Field
<div class="close">X</div>
</div>
<div id="RB1" class="block">Radio Button-1
<div class="close">X</div>
</div>
</div>
<div id="Container" >
</div>
</body>
</html>
$('#Container').sortable({
helper: 'clone'
});
$('.block').draggable({
helper: 'clone',
connectToSortable: '#Container'
});
#Container{
position:absolute;
width:1024px;
height:508px;
left:300px;
top:100px;
overflow: auto;
border:1px solid;
box-shadow:
0 0 0 3px hsl(0, 0%, 50%),
0 0 0 5px hsl(0, 0%, 60%);
}
#Title{
position:absolute;
font-family: sans-serif;
font-size:30px;
width:1024px;
left:150px;
color:Red;
text-align:center;
height:100px;
}
.block{
position:relative;
width:100px;
height:50px;
left:0px;
top:50px;
margin-bottom:2px;
border:1px solid;
}
.block1{
position:relative;
width:200px;
height:50px;
left:0px;
top:50px;
background-color:green;
margin-bottom:2px;
border:1px solid;
}
#Heading{
background-color:red;
}
#listOfItems{
position:absolute;
top:100px;
width:250px;
height:500px;
border:1px solid;
overflow:hidden;
border-style: doubled;
box-shadow:
0 0 0 3px hsl(0, 0%, 50%),
0 0 0 5px hsl(0, 0%, 60%);
}
.close{
position: relative;
height: 15px;
width: 12px;
left: 976px;
border: 1px solid red;
display:none;
}
.block:hover .close{
display:block;
}
所以我已经设法根据您提供的代码制作了一个更简单的工作模型。由于包含的 jQuery-ui 不正确,您提供的 fiddle 无法正常工作。
逻辑是,就在丢弃之前,我们正在检查丢弃项目的 id,并根据该 id,更改丢弃元素的内容。通过在dropping元素中添加一个新的css class,可以指定droppable的高度和宽度。我添加了一些代码,如图
$('#Container').sortable({
helper: 'clone',
receive : function(event,ui){
var block_id = ui.item.attr('id');
var html='<div class="close">X</div>';
if(block_id == 'Heading'){
html+= '<h1>Sample Heading</h1>';
}else if(block_id == 'txtbox'){
html+= '<input type="text" name="txt_name" placeholder="your text here">';
}else if(block_id == 'txtfield'){
html+= '<textarea name="textarea_name" cols="40" rows="6"></textarea>';
}else if(block_id == 'RB1'){
html+= '<input type="radio" name="radio_name" value="option1">Option1<input type="radio" name="radio_name" value="option2">Option2';
}
ui.helper.removeAttr('style').addClass('new_element_class').html(html);
}
});
$('.block').draggable({
helper: 'clone',
connectToSortable: '#Container'
});
$('.close').live("click", function(){
$(this).parent().hide();
});
这是工作 fiddle。 fiddle。检查一下
https://jsfiddle.net/UdayKumar/rm5ey912/2/
我已经复制了工作演示。
从左侧拖动元素并放到右侧。 div 必须动态改变它的宽度和高度。关于删除不同的元素,我想动态添加元素,如单选按钮、复选框、文本字段等。有人可以帮助我吗??
<!doctype html>
<head>
<title>Form Builder</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
<script src="jQuery.min.js"></script>
<script src="jQuery.ui.js" type="text/javascript"></script>
<script src="myscript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="Title"> <img src="" width="200" height="70" ></div>
<div id="listOfItems">
<div id="Heading" class="block">Heading
<div class="close">X</div>
</div>
<div id="txtbox" class="block">Text Box
<div class="close">X</div>
</div>
<div id="txtfield" class="block">Text Field
<div class="close">X</div>
</div>
<div id="RB1" class="block">Radio Button-1
<div class="close">X</div>
</div>
</div>
<div id="Container" >
</div>
</body>
</html>
$('#Container').sortable({
helper: 'clone'
});
$('.block').draggable({
helper: 'clone',
connectToSortable: '#Container'
});
#Container{
position:absolute;
width:1024px;
height:508px;
left:300px;
top:100px;
overflow: auto;
border:1px solid;
box-shadow:
0 0 0 3px hsl(0, 0%, 50%),
0 0 0 5px hsl(0, 0%, 60%);
}
#Title{
position:absolute;
font-family: sans-serif;
font-size:30px;
width:1024px;
left:150px;
color:Red;
text-align:center;
height:100px;
}
.block{
position:relative;
width:100px;
height:50px;
left:0px;
top:50px;
margin-bottom:2px;
border:1px solid;
}
.block1{
position:relative;
width:200px;
height:50px;
left:0px;
top:50px;
background-color:green;
margin-bottom:2px;
border:1px solid;
}
#Heading{
background-color:red;
}
#listOfItems{
position:absolute;
top:100px;
width:250px;
height:500px;
border:1px solid;
overflow:hidden;
border-style: doubled;
box-shadow:
0 0 0 3px hsl(0, 0%, 50%),
0 0 0 5px hsl(0, 0%, 60%);
}
.close{
position: relative;
height: 15px;
width: 12px;
left: 976px;
border: 1px solid red;
display:none;
}
.block:hover .close{
display:block;
}
所以我已经设法根据您提供的代码制作了一个更简单的工作模型。由于包含的 jQuery-ui 不正确,您提供的 fiddle 无法正常工作。
逻辑是,就在丢弃之前,我们正在检查丢弃项目的 id,并根据该 id,更改丢弃元素的内容。通过在dropping元素中添加一个新的css class,可以指定droppable的高度和宽度。我添加了一些代码,如图
$('#Container').sortable({
helper: 'clone',
receive : function(event,ui){
var block_id = ui.item.attr('id');
var html='<div class="close">X</div>';
if(block_id == 'Heading'){
html+= '<h1>Sample Heading</h1>';
}else if(block_id == 'txtbox'){
html+= '<input type="text" name="txt_name" placeholder="your text here">';
}else if(block_id == 'txtfield'){
html+= '<textarea name="textarea_name" cols="40" rows="6"></textarea>';
}else if(block_id == 'RB1'){
html+= '<input type="radio" name="radio_name" value="option1">Option1<input type="radio" name="radio_name" value="option2">Option2';
}
ui.helper.removeAttr('style').addClass('new_element_class').html(html);
}
});
$('.block').draggable({
helper: 'clone',
connectToSortable: '#Container'
});
$('.close').live("click", function(){
$(this).parent().hide();
});
这是工作 fiddle。 fiddle。检查一下