Дропзона всегда прыгает во время пролета - PullRequest
Новая
       5

Дропзона всегда прыгает во время пролета

0 голосов
/ 30 сентября 2019

Я работаю на доске Канбан. Я пытаюсь переместить один элемент с доски на другой, я создаю дропзону, чтобы указать это будущее событие для целей UX. Но дропзона всегда прыгает, когда я вхожу в дропзону.

HTML 

<div 
  class="Board" 
  onDragOver="onDragOver({ev:event, el:this})" 
  onDragEnter="onDragEnter(this)" 
  onDragLeave="onDragLeave(this)"
  onDrop="onDrop(event)"
>
  <div class="Board-title Board-${boardKey+1}">${title}</div>
  ${items.map((itemValue, itemKey) => List({
    itemValue, 
    itemKey, 
    boardKey, 
    boardLength
  })).join("")}
  <div class="dropzone"></div>
  <div class="button" onClick="addItem(${boardKey})">+ add new item</div>
</div>

JS Handles 

function onDrop(e) {
  //e.preventDefault();
  console.log('onDrop')
  console.log(e.dataTransfer.getData("source"));
}

function onDragEnter(e) {
  console.log("onDragEnter", Date.now());
  e.style.backgroundColor = "lightyellow";
}

function onDragOver({ev, el}) {
  ev.preventDefault();
  // console.log("onDragOver")
  console.log("onDargOver", event.target)
  el.querySelector(".dropzone").style.display="block";
  el.style.backgroundColor = "lightyellow";
}

function onDragLeave(e) {
  console.log("onDragLeave", e);
  e.querySelector(".dropzone").style.display="none";
  e.style.backgroundColor = "inherit";
}

Полный код здесь: https://codepen.io/dotku/pen/qBWGgGX?editors=1111

...