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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过拖放将自定义元素的对象引用传递给另一个自定义元素相关的知识,希望对你有一定的参考价值。

我有2个自定义元素,A和B.我目前已经设置了元素,以便我可以拖动A并将其拖放到B上,并将A的副本添加为B的子项。我不想要副本A虽然是孩子。我希望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()

谢谢! :)

答案

这似乎是不可能的。

相反,为所有元素提供唯一ID,然后通过dataTransfer方法传递ID。这样,接收元素可以通过其ID找到元素并直接引用它。

通过收益获取唯一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)

以上是关于通过拖放将自定义元素的对象引用传递给另一个自定义元素的主要内容,如果未能解决你的问题,请参考以下文章

将自定义变量传递给 Formstone

将自定义 ListView 项传递给 Android 中的其他活动

通过 WatchConnectivity 的 sendMessageData 将自定义对象的 NSArray 作为 NSData 传递

通过 Provider 将自定义 props 传递给每个样式化的组件

在 QListWidget 之间拖放自定义小部件项目

将自定义元数据设置为 Google Cloud Storage 中的对象