是否可以在Web组件中的自定义HTML元素上添加拖动事件，例如dragstart，dragend，dragdrop等

Question

我试图添加事件侦听器以拖放Web组件中创建的自定义元素。但是它不会触发事件。我尝试过的组件实际上嵌套在另一个组件中。有人知道如何解决吗？

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

代码实际上有点长。因此，我将尝试总结我想要实现的目标。我的代码有很多列，每列都有很多卡。所以我试图将卡片从一列拖到另一列。在这里，我有一个容器自定义元素，其中包含自定义列元素。 Custom Colums元素包含许多自定义列元素。列元素包含自定义卡片元素。

我正在为卡和列组件编写侦听器

   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));
    }