Question

我正在尝试制作一个可自定义的表单构建器，您可以将Bootstrap字段拖放到一个框中以制作另一个表单。我是html / css / js的新手，所以任何事情都会非常感激！

这是我到目前为止所拥有的：

submit

的JavaScript ：

<!-- 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>

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只是一个实现）细节）：

拖放到窗体内部

1 个答案: