如何在阴影DOM中制作Div拖动

Question

我正在使用Django项目中的自定义元素来制作可重复使用的组件。在每个中，似乎都必须使用我一直在相对轻松

的阴影树

但是，我确实需要在阴影 - dom内部的特定div才能拖动(从CSS意义上讲 - 实际上是可移动的(。我探索了一些选项，尤其是interactjs和jqueryUI。但是，我无法在影子 - dom中找到作品。

如果它在阴影dom内部？

Answer 1

这可以在Vanilla JavaScript中轻松完成：

在Shadow DOM中使用draggable元素并处理MDN文档中所述的dragstart，dragover和drop事件。

customElements.define( 'drag-div', class extends HTMLElement {
    connectedCallback() {
        let sh = this.attachShadow( { mode: 'open' } )
        sh.innerHTML = `
            <style>
                :host { 
                    display: block ;
                    height: 50px ;
                    border: 1px solid red ;
                }
                [draggable] {
                    display: inline-block;
                    margin : 20px ;
                    cursor: pointer ;
                    background-color: lightblue ;
                }
            </style>
            <div draggable=true>drag me</div>`
        sh.querySelector( '[draggable]' )
          .ondragstart = ev => ev.dataTransfer.setData("text/html", ev.target.outerHTML )
    }
} )
customElements.define( 'drop-div', class extends HTMLElement {
    connectedCallback() {
        let sh = this.attachShadow( { mode: 'open' } )
        sh.innerHTML = `
            <style>
                    :host { 
                        display: block ;
                        height: 50px ;
                        border: 1px solid green ;
                    }
                    :host>div {
                        height: 100% ;
                    }
            </style>
            <div></div>`
        let div = sh.querySelector( 'div' )
        div.ondragover = ev => ev.preventDefault()
        div.ondrop = ev => div.innerHTML += ev.dataTransfer.getData( 'text/html' )         
    }
} )

<drag-div></drag-div>
<drop-div></drop-div>