Как перетащить узел из одного столбца div в другой

Question

Я приложил все усилия, чтобы найти кого-то с похожим вопросом, и пока они там, они не соответствуют тому, что мне нужно сделать. Таким образом, я не смог решить свою проблему, прочитав ответы на них. Я потратил на это последние 5 часов, и понял, что мне нужно сделать, но в конце концов столкнулся с проблемой, которую не мог ни решить, ни решить.

Случай использования: я собираюсь динамически построить «столбец». Я хочу иметь возможность перетаскивать элемент из столбца A в столбец B (и наоборот). После перетаскивания элемента в другой столбец он должен быть удален из исходного столбца.

Здесь - это ссылка на страницу JSFiddle, на которой есть код, на котором я тестировал. Поскольку он сидит прямо сейчас, он прекрасно работает ровно один раз. Когда я пытаюсь использовать его во второй раз, ничего не происходит. Лучшее, что я могу сказать, это то, что слушатель события handleDragStart не запускается второй раз; в результате при загрузке из веб-формы ASP. Net в клиенте браузера появляется следующая ошибка при попытке переместить второй элемент: Uncaught DOMException: Failed to set the 'outerHTML' property on 'Element': This element has no parent node.

Answer 1

Посмотрите, я разместил только необходимый код

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

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

function drop(ev) {
  ev.preventDefault();
  var elementId = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(elementId));
}

.column {
  width: 75px;
  min-height: 50px;
  background-color: #6772E5;
  color: #FFF;
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  font-size: 1em;
}

<div id="columns" style="width: 240px;">
  <div id="columna" class="column" style="float:left;" ondrop="drop(event)" ondragover="allowDrop(event)">
    <header>Unlocked</header>
    <div class="obj" draggable="true" id="a" ondragstart="drag(event)">A</div>
    <div class="obj" draggable="true" id="b" ondragstart="drag(event)">B</div>

  </div>
  <div id="columnb" class="column" style="float:right;" ondragover="allowDrop(event)" ondrop="drop(event)">
    <header>Locked</header>
    <div class="obj" draggable="true" id="c" ondragstart="drag(event)">C</div>
    <div class="obj" draggable="true" id="d" ondragstart="drag(event)">D</div>
  </div>
</div>

Примечание: Я добавил идентификатор для каждого из узлов, если вы не хотите использовать идентификаторы, которые вы может сделать это так

var draggedElement;

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

function drag(ev) {
  draggedElement = ev.target;
}

function drop(ev) {
  ev.preventDefault();
  ev.target.appendChild(draggedElement);
}

.column {
  width: 75px;
  background-color: #6772E5;
  color: #FFF;
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  font-size: 1em;
}

<div id="columns" style="width: 240px;">
  <div id="columna" class="column" style="float:left;" ondrop="drop(event)" ondragover="allowDrop(event)">
    <header>Unlocked</header>
    <div class="obj" draggable="true" ondragstart="drag(event)">A</div>
    <div class="obj" draggable="true" ondragstart="drag(event)">B</div>

  </div>
  <div id="columnb" class="column" style="float:right;" ondragover="allowDrop(event)" ondrop="drop(event)">
    <header>Locked</header>
    <div class="obj" draggable="true" ondragstart="drag(event)">C</div>
    <div class="obj" draggable="true" ondragstart="drag(event)">D</div>
  </div>
</div>