javascript - 拖放到表单内部

Question

我正在尝试制作一个可自定义的表单生成器，您可以在其中将 Bootstrap 字段拖放到一个框中以制作另一个表单。我是 html/css/js 的新手，所以我们将不胜感激!

这是我目前所拥有的:

<!-- FORM START -->
<form class="form-horizontal">
  <fieldset>
    <div class="col-md-6">
      <h3> Preexisting Fields </h3>
      <hr/>

      <!-- First Name -->
      <div id="firstnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
        <label class="col-md-3 control-label" for="textinput">First Name</label>  
        <div class="col-md-9" >
          <input id="textinput" name="textinput" type="text" placeholder="John"
                 class="form-control pull-right">
        </div>
      </div>
      <!-- Last Name -->
      <div id="lastnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
        <label class="col-md-3 control-label" for="textinput">Last Name</label>  
        <div class="col-md-9" >
          <input id="textinput" name="textinput" type="text" placeholder="Doe"
                 class="form-control input-md">
        </div>
      </div>
    </div>
  </fieldset>
</form>

<!-- INSERT HERE: I want to be able to drag those items above 
                  into the panel and create a new form -->
<div id="builder" class="panel panel-default">
  <h3> Drag Fields </h3> <hr/>
  <div class="panel-body" ondrop="drop(event)" ondragover="allowDrop(event)">
    <form id="target" class="form-horizontal">
      <fieldset >
      </fieldset>
    </form>
  </div>
</div>

JavaScript:

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));
}

Answer 1

这似乎取得了一些成功(参见 this fiddle 或下面的代码片段)

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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

<!-- FORM START -->
<form class="form-horizontal">
  <fieldset>
    <div class="col-md-6">
      <h3> Preexisting Fields </h3>
      <hr/>

      <!-- First Name -->
      <div id="firstnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
        <label class="col-md-3 control-label" for="textinput">First Name</label>  
        <div class="col-md-9" >
          <input id="textinput" name="textinput" type="text" placeholder="John" class="form-control pull-right">
        </div>
      </div>
      <!-- Last Name -->
      <div id="lastnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
        <label class="col-md-3 control-label" for="textinput">Last Name</label>  
        <div class="col-md-9" >
          <input id="textinput" name="textinput" type="text" placeholder="Doe" class="form-control input-md">
        </div>
      </div>
    </div>
  </fieldset>
</form>

<!-- INSERT HERE: i want to be able to drag those items above into the panel and create a new form -->
<div id="builder" class="panel panel-default">
  <h3> Drag Fields </h3> <hr/>
  <div class="panel-body" ondrop="drop(event)" ondragover="allowDrop(event)">
    <form id="target" class="form-horizontal">
      <fieldset >
      </fieldset>
    </form>
  </div>
</div>

您能详细描述一下您遇到的问题吗？您期望看到什么与实际发生了什么？

---

注意:我也赞同 D Jones 的评论，即这里有大量的工作来构建 The General Case .避免重复的冲动是好的，但复制和粘贴将有助于在您看到创建引擎为您节省时间的好处之前很久就掌握 Bootstrap 中的一些常见 html 模式和习语。

就是说，如果您确实想将其作为一个学习元素来探索，我会查看更多关于 jQuery UI 的文档，因为它在这里做了很多繁重的工作(Bootstrap html 只是一个实现)细节):

• draggable
• droppable
• sortable