Нужно очень конкретное решение для перетаскиваемых элементов div, которые находятся в разборном родительском элементе div - PullRequest
Новая
       5

Нужно очень конкретное решение для перетаскиваемых элементов div, которые находятся в разборном родительском элементе div

0 голосов
/ 10 сентября 2018

Во-первых, мне нужно решение с использованием простого JavaScript. Нет JQuery (не допускается для доставки). Кроме того, я не могу вставить код из-за собственности проекта.

По сути, мне нужен список (который представляет собой коллекцию div, а не настоящий HTML-список), который можно перетащить в другой div и поместить на место. «Список» представляет собой складной контейнер содержимого, что означает, что я не могу использовать абсолютное позиционирование дочерних элементов, что затрудняет перетаскивание. При событии mouseup целевой контейнер отбрасывания изменит имена классов, чтобы отразить то, что было добавлено в него (уже сработало).

У меня есть около 30 элементов с типом класса listItem, что хорошо для предварительного прототипа (хотя я, вероятно, буду использовать объект json позже).

Есть ли простой способ сделать это? 

//example of the html 
<button class="collapsible"><img...></button>
<div class="content">
    <div class='listItem' draggable="true">
</div>

//relevant javascript
<script>
class App {

static init() {
   var items = document.getElementsByClassName('listItem');
   var indexOfItem;

for(var i = 0; i < items.length; i++){
    items[i].onclick = function(){
    console.log(items.indexOf (this));
    }
}

App.box = document.getElementsByClassName('listItem')[0]

App.box.addEventListener("dragstart", App.dragstart)
App.box.addEventListener("dragend", App.dragend)

const containers = document.getElementsByClassName('holder')

for(const container of containers) {
  container.addEventListener("dragover", App.dragover)
  container.addEventListener("dragenter", App.dragenter)
  container.addEventListener("dragleave", App.dragleave)
  container.addEventListener("drop", App.drop)
  }
}

static dragstart() {
this.className += " held"

setTimeout(()=>this.className="invisible", 0)
}

static dragend() {
this.className = "box"
}

static dragover(e) {
e.preventDefault()
}

static dragenter(e) {
e.preventDefault()
this.className += " hovered"
}

static dragleave() {
this.className = "holder"
}

static drop() {
this.className = "holder"
this.append(App.box)
 }

}

document.addEventListener("DOMContentLoaded", App.init)
</script>
...