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

tpreston_it

我有2个自定义元素A和B。我现在已经设置了元素，以便可以将A拖放到B上，并且将A的副本添加为B的子元素。我不需要虽然是孩子。我希望A本身是孩子。

我怎样才能做到这一点？

我正在使用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()

谢谢！:)

tpreston_it

这似乎是不可能的。

而是给所有元素一个唯一的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)

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。