我有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)