Uncaught TypeError in HTML/CSS/JS
Question
I'm trying to replicate a form builder similar to http://bootsnipp.com/j87klPolka/formbuilder3.html .
I'm fairly new to HTML/CSS/JS so I'm not sure if I'm doing this right. I'm just trying to do the frontend of this, so storing the data for the form being created isn't an issue right now. Thanks! Below is the code:
<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>
1 answers
solution1
2 ACCPTED 2016-02-16 01:59:57
Your <li> s are draggable, but they have no id set, which you are trying to access in your drag method. Simply set an id to each of the draggable list items to make it work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.