gpt4 book ai didi

javascript - HTML/CSS/JS 中未捕获的类型错误

转载 作者:太空宇宙 更新时间:2023-11-04 02:37:15 24 4
gpt4 key购买 nike

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

最佳答案

你的 <li> s 是可拖动的,但它们没有 id设置,你正试图在你的 drag 中访问它方法。只需设置 id到每个可拖动的列表项以使其工作。

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

关于javascript - HTML/CSS/JS 中未捕获的类型错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35422181/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com