Question

我在django项目中使用customElements来制作可重用的组件。在每种情况下，似乎都需要使用我相对容易地进行过的阴影树

但是，我确实需要在阴影球内部有一个特定的div才能拖动（不是CSS含义-实际上是可移动的）。我探讨了一些选项，尤其是interactjs和jqueryUI。但是我什么都没找到，在影子巨蛋之内。

如果在阴影DOM内，是否真的没有办法制作可拖动元素？

Answer 1

这可以使用原始Javascript轻松完成：

使用Shadow DOM中的draggable元素，并按照MDN documentation中的说明处理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>

如何在阴影DOM中使div可拖动？

1 个答案: