Можно ли добавить события перетаскивания, такие как перетаскивание, драгенд, перетаскивание и т. Д. В пользовательские элементы HTML в веб-компонентах - PullRequest
Новая
       48

Можно ли добавить события перетаскивания, такие как перетаскивание, драгенд, перетаскивание и т. Д. В пользовательские элементы HTML в веб-компонентах

0 голосов
/ 26 февраля 2019

Я попытался добавить прослушиватели событий для перетаскивания на пользовательских элементах, созданных в веб-компонентах.Но это не запускает события.Компонент, который я попробовал, фактически вложен в другой компонент.Кто-нибудь знает, как решить эту проблему? 

-- Main Element (custom)
  -- Nested Element (custom) Firing events at this level

Код на самом деле немного длинный.Поэтому я постараюсь обобщить то, чего я хочу достичь.В моем коде много столбцов, а в каждом столбце много карточек.Поэтому я пытаюсь перетащить карту из одного столбца в другой.Здесь у меня есть пользовательский элемент контейнера, который содержит элемент пользовательских столбцов.Пользовательский элемент Colums содержит множество пользовательских элементов столбца.Элемент Column содержит пользовательский элемент карты.

Я пишу слушатели для моей карты и компонентов столбца 

   card.addEventListener('dragstart', (e) => {
       dragstart_handler(e);
    });

    card.addEventListener('dragend', (e) => {
        dragend_handler(e);
    })

   function dragstart_handler(ev) {
      ev.dataTransfer.setData("text/plain", ev.target.id);
      ev.dataTransfer.dropEffect = "copy";
   }

   function dragend_handler(ev) {
      ev.dataTransfer.clearData();
   }

   //column
    column.addEventListener('drop', (e) => {
      drop_handler(e,this);
    });

    column.addEventListener('dragover', (e) => {
      dragover_handler(e);
    });

    function dragover_handler(ev) {
      ev.dataTransfer.dropEffect = "move";
    }

    function drop_handler(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text/plain");
      ev.target.appendChild(document.getElementById(data));
    }
...