html控件如输入框、按钮通过拖拽式生成

可以使用拖放API（Drag and Drop API）和JavaScript来实现拖拽式生成HTML控件的功能。下面是一个简单的示例代码：

HTML部分：

<div id="toolbar">
  <div id="input" draggable="true" ondragstart="dragStartHandler(event);">输入框</div>
  <div id="button" draggable="true" ondragstart="dragStartHandler(event);">按钮</div>
</div>
<div id="dropzone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
  将控件拖拽到这里
</div>

JavaScript部分：

function dragStartHandler(event) {
  event.dataTransfer.setData("text/plain", event.target.id);
}

function dragOverHandler(event) {
  event.preventDefault();
}

function dropHandler(event) {
  event.preventDefault();
  var id = event.dataTransfer.getData("text/plain");
  var element;
  if (id === "input") {
    element = document.createElement("input");
    element.type = "text";
  } else if (id === "button") {
    element = document.createElement("button");
    element.innerHTML = "点击";
  }
  document.getElementById("dropzone").appendChild(element);
}

在这个示例中，我们在`toolbar`中放置了两个可拖动的`div`元素，并在`dragStartHandler`函数中设置了被拖动元素的ID。当用户将一个元素拖放到`dropzone`元素上时，`dropHandler`函数会被调用，其中的`event.dataTransfer.getData("text/plain")`方法可以获取被拖动元素的ID，然后根据ID创建相应的HTML控件，并将其插入到`dropzone`元素中。