Загружаете текстовый файл и перетаскиваете слова? - PullRequest
Новая
       4

Загружаете текстовый файл и перетаскиваете слова?

1 голос
/ 18 апреля 2020

Я загружаю текстовый файл на свою домашнюю страницу, и в настоящее время он загружается в текстовую область.

Проблема в том, что я хочу перетащить отдельные слова в другой элемент html, который, я не думаю, возможен из элементов текстовой области в html?

Есть ли способ обойти это с html или JavaScript?

1 Ответ

1 голос
/ 18 апреля 2020

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

<span class="word" draggable="true">word</span>

Так что тогда вы можете применить стандартное HTML5 поведение перетаскивания к этим span элементы. Проверьте пример ниже: 

const words = 'words from file';
const container = document.getElementById('container');
let dragged; 

container.innerHTML = words.split(' ').map(w => `<span class="word" draggable="true">${w}</span>`).join('');

function onDragOver(event) {
  // Prevent default to allow drop
  event.preventDefault();
}

function onDragLeave(event) {
  event.target.style.background = '';
}

function onDragEnter(event) {
  const target = event.target;
  if (target && dragged && target.classList.contains('drop-zone')) {
      event.preventDefault();
      // Set the dropEffect to move
      event.dataTransfer.dropEffect = 'move'
      target.style.background = '#1f904e';
  }
}

function onDrop(event) {
  const target = event.target;
  if (target && dragged && target.classList.contains('drop-zone')) {
    target.style.backgroundColor = '';
    event.preventDefault();
    // Get the id of the target and add the moved element to the target's DOM
    dragged.parentNode.removeChild(dragged);
    dragged.style.opacity = '';
    target.appendChild(dragged);
  }
}

function onDragStart(event) {
    dragged = event.target;
    event.dataTransfer.setData('text', event.target.id);
    event.dataTransfer.dropEffect = 'move';
    // Make it half transparent
    event.target.style.opacity = .3;
}

function onDragEnd(event) {
    // Reset the transparency
    event.target.style.opacity = ''; // reset opacity when drag ends 
    dragged = null; 
}

for (word of document.getElementsByClassName('word')) {
  word.addEventListener('dragstart', onDragStart);
  word.addEventListener('dragend', onDragEnd);
}

for (dropZone of document.getElementsByClassName('drop-zone')) {
  dropZone.addEventListener('drop', onDrop);
  dropZone.addEventListener('dragenter', onDragEnter);
  dropZone.addEventListener('dragleave', onDragLeave);
  dropZone.addEventListener('dragover', onDragOver);
}
.drop-zone {
  position: relative;
  width: 100px;
  height: 30px;
  overflow: hidden;
  background: #878787;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
}

.word {
  margin: 0 2px;
}
<div id=container></div>
<div class='drop-zone'></div>
<div class='drop-zone'></div>
<div class='drop-zone'></div>
...