javascript - 通过拖放将自定义元素的对象引用传递给另一个自定义元素
问题描述
我有 2 个自定义元素,A 和 B。我目前设置了元素,以便我可以将 A 拖放到 B 上,并将 A 的副本添加为 B 的子项。我不想要虽然是孩子。我希望 A 本身成为孩子。
我怎样才能做到这一点?
我正在使用 dataTransfer 将 HTML 发送给 B,然后 B 正在构建 A 的副本。我很乐意使用某些东西来代替 dataTransfer,只要它能完成工作。我不想使用任何库。
咖啡脚本:
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 找到该元素并直接引用它。
通过 yield 获取唯一 ID:
getUniqueID = ->
num = 0
loop
num += 1
yield 'Unique_ID:' + num
return
发送身份证:
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)
推荐阅读
- c# - 使用 Bitmaptransform 缩放图像会在 win2d 中提供模糊图像
- c - 文件指针意外更改的问题
- sql - 创建视图创建一个以前不存在的新错误
- windows - 无法连接到主机 discordapp.com:443 ssl:default [[SSL: CERTIFICATE_VERIFY_FAILED] 证书验证失败 (_ssl.c:852)]
- c# - 在我的 Elasticsearch 嵌套客户端中使用泛型时出错?它无法识别字段。标题
- react-native - React Native Color 属性不起作用
- javascript - Qualtrics:如何使用 altair 可视化库创建图表
- excel - VBA 代码返回运行时错误“这不起作用,因为它会移动工作表中表格中的单元格”
- r - 使用 readline 在 R 中存储多个用户输入
- python - FileNotFoundError: [Errno 2] 没有这样的文件或目录。Python没有正确读取文件