HTML 5 Drag & Drop для таблиц - PullRequest
Новая
       25

HTML 5 Drag & Drop для таблиц

0 голосов
/ 19 октября 2018

Я пытаюсь заставить работать HTML5 drag & drop для разработки конструктора запросов к базе данных, такого как конструктор запросов 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>
...