通过拖放将自定义元素的 object 引用传递给另一个自定义元素

Question

我有 2 个自定义元素，A 和 B。我目前已设置这些元素，以便我可以将 A 拖放到 B 上，并将 A 的副本添加为 B 的 child . 我不希望 A 的副本成为 child。我希望 A 本身成为 child.

我该怎么做？

我正在使用 dataTransfer 将 HTML 发送给 B，然后 B 正在构建 A 的副本。只要能完成工作，我很乐意使用某些东西而不是 dataTransfer。我不想使用任何库。

CoffeeScript：

class A extends HTMLElement
    constructor: () ->
        super()
        this.setAttribute 'draggable','true'
        this.setAttribute 'ondragstart','drag(event)'
    drag: (event) ->
        event.stopPropagation()
        event.dataTransfer.setData 'symbol', this.outerHTML

class B extends A
    constructor: ->
        super()
        this.setAttribute 'ondrop','drop(event)'
        this.setAttribute 'ondragover','allowDrop(event)'
    drop: (event) ->
        event.preventDefault()
        event.stopPropagation()
    data = event.dataTransfer.getData 'symbol'
        template = document.createElement 'template'
        template.innerHTML = data
        try
            event.target.myFunctionToAddChild template.content.firstChild
    allowDrop: (event) ->
        event.preventDefault()

谢谢！ :)

Answer 1

好像做不到

相反，给所有元素一个唯一的 ID，然后通过 dataTransfer 方法传递该 ID。这样接收元素就可以通过ID找到元素并直接引用它。

通过 yield 获取唯一 ID：

getUniqueID = ->
    num = 0
    loop
        num += 1
        yield 'Unique_ID:' + num
    return

发送ID：

drag: (event) ->
    event.stopPropagation()
    event.dataTransfer.setData "Unique_ID", this.id

接收 ID 并查找元素：

drop: (event) ->
    event.preventDefault()
    event.stopPropagation()
    Unique_ID = event.dataTransfer.getData 'Unique_ID'
    element = document.getElementById(Unique_ID)

通过拖放将自定义元素的 object 引用传递给另一个自定义元素

Pass object reference of custom element to another custom element via drag and drop

javascript

coffeescript