表格的HTML 5拖放

Question

我正在尝试使本机HTML 5拖放工作，以开发数据库查询设计器，例如SQL Server查询设计器。我已经完成了示例，一旦从左侧面板拖动Employee表，创建了正方形对象。需要您的帮助来关注

1. 拖动后，需要在左侧面板中保留表格名称。
2. 在该区域内可移动的右面板方形对象。
每个表的
3. 单独的正方形对象。

请你帮我

我的html代码如下，

function drag_handler(ev) {
}

function dragstart_handler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop_handler(ev) {
  ev.currentTarget.style.background = "lightyellow";
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  element = document.getElementById(data)
  element.classList.add("mystyle");
  ev.target.appendChild(document.getElementById(data));
}

function dragover_handler(ev) {
  ev.preventDefault();
}

.nav-bar {
  float: left;
  width: 250px;
  height: 626px;
  background-color: brown;
}

.container {
  width: 1099px;
  height: 626px;
  margin-left: 250px;
  background-color: aqua;
}

.drag-block {
  width: 130px;
  height: 130px;
  background-color: blue;
}

.mystyle {
  width: 130px;
  height: 130px;
  background-color: blue;
}

<div class="row">
  <div class="nav-bar">
    <Ul>
      <li id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true">Employee Table</li>
    </Ul>
  </div>

  <div id="target" class="container" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"></div>
</div>