我尝试复制类似于http://bootsnipp.com/j87klPolka/formbuilder3.html的表单构建器。
我是HTML / CSS / JS的新手,所以我不确定我是否正确行事。我只想尝试这样做的前端,因此存储正在创建的表单的数据现在不是问题。谢谢!以下是代码:
<html>
<head>
<title>Form Builder</title>
<link rel="stylesheet" type="text/css" href="Sign_in.css">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<style>
#div1 {width:50%; height:50%; padding:50px; border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Hello</legend>
<ul id="drag-elements">
<li draggable="true" ondragstart="drag(event)">
<!-- Text input-->
<div class="form-group" >
<label class="col-md-4 control-label" for="textinput">Text</label>
<div class="col-md-4" >
<input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
</div>
</div>
</li>
<li draggable="true" ondragstart="drag(event)">
<!-- Password input-->
<div class="form-group" draggable="true" ondragstart="drag(event)">
<label class="col-md-4 control-label" for="passwordinput">Password Input</label>
<div class="col-md-4">
<input id="passwordinput" name="passwordinput" type="password" placeholder="placeholder" class="form-control input-md">
<span class="help-block">help</span>
</div>
</div>
</li>
</fieldset>
</form>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</body>
答案 0 :(得分:2)
您的<li>
是可拖动的,但它们没有id
设置,您尝试在drag
方法中访问它。只需为每个可拖动列表项设置id
即可使其正常工作。