Question

我尝试复制类似于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>

Answer 1

您的<li>是可拖动的，但它们没有id设置，您尝试在drag方法中访问它。只需为每个可拖动列表项设置id即可使其正常工作。

https://jsfiddle.net/Hatchet/3y3xyg0b/

HTML / CSS / JS中未捕获的TypeError

1 个答案: