Я делаю сортируемый список перетаскиванием. Как я могу применить css к призрачному изображению при перетаскивании? - PullRequest
Новая
       22

Я делаю сортируемый список перетаскиванием. Как я могу применить css к призрачному изображению при перетаскивании?

0 голосов
/ 02 августа 2020

Мне нужно сделать ореолы непрозрачными, чтобы было ощущение, будто я поднимаю элемент, а затем перемещаю его. Я не хочу изменять фантомное изображение, только его непрозрачность на 1. Я нашел метод setDragImage (), но он для установки нового изображения не решает мою проблему с настройкой непрозрачности фантомных изображений.

Также я хотел бы знать, есть ли способ, которым я могу сделать два таких списка с возможностью сортировки перетаскиванием, но элементы не могут быть перемещены в другие списки. 

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {

  draggable.addEventListener('dragstart', (e) => {
    draggable.classList.add('dragging')
     e.dataTransfer.setDragImage(e.target, 10, 10);
  })

  draggable.addEventListener('dragend', () => {
    draggable.classList.remove('dragging')
    
  })
})

containers.forEach(container => {
  container.addEventListener('dragover', e => {
    e.preventDefault()
    const afterElement = getDragAfterElement(container, e.clientY)
    const draggable = document.querySelector('.dragging')
    if (afterElement == null) {
      container.appendChild(draggable)
    } else {
      container.insertBefore(draggable, afterElement)
    }
  })
})

function getDragAfterElement(container, y) {
  const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]

  return draggableElements.reduce((closest, child) => {
    const box = child.getBoundingClientRect()
    const offset = y - box.top - box.height / 2
    if (offset < 0 && offset > closest.offset) {
      return { offset: offset, element: child }
    } else {
      return closest
    }
  }, { offset: Number.NEGATIVE_INFINITY }).element
}
body {
  margin: 0;
}

.container {
  background-color: #111;
  padding: 1rem;
  margin-top: 1rem;
}

.draggable {
  padding: 1rem;
  background-color: #aaa;
  border: 1px solid  #444;
  cursor: move;
  text-align: center;
  font-weight: 600;
  color: white;
/*   -webkit-user-drag: none; 
  -khtml-user-drag: none; 
  -moz-user-drag: none; 
  -o-user-drag: none; 
  user-drag: none;  */
}

.draggable.dragging {
  opacity: .1;
}
<div class="container" class="container">
  <div class="draggable" draggable="true">Hello</div>
  <div class="draggable" draggable="true">World</div>
   <div class="draggable" draggable="true">Apple</div>
  <div class="draggable" draggable="true">Dell</div>
  <div class="draggable" draggable="true">Microsoft</div>
  <div class="draggable" draggable="true">Tesla</div>
   <div class="draggable" draggable="true">Facebook</div>
  <div class="draggable" draggable="true">Spacex</div>
</div>

<!-- <div class="container" id="another">
  
</div> -->
...