Передать ссылку на объект пользовательского элемента в другой пользовательский элемент путем перетаскивания

Question

У меня есть 2 пользовательских элемента, A и B. В настоящее время у меня есть элементы, настроенные так, чтобы я мог перетащить A и перетащить его на B, а копия A была добавлена ​​как потомок B. Я не хочукопия А, чтобы быть ребенком, хотя.Я хочу, чтобы сама A была дочерней.

Как я могу это сделать?

Я использую dataTransfer для отправки HTML-кода в B, а затем B создает копию A. I 'Я счастлив использовать что-то вместо dataTransfer, если он выполняет свою работу.Я не хочу использовать какие-либо библиотеки.

The 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

Это кажется невозможным.

Вместо этого присвойте всем элементам уникальный идентификатор, а затем передайте идентификатор с помощью метода dataTransfer.Таким образом, принимающий элемент может найти элемент по его идентификатору и напрямую ссылаться на него.

Получить уникальный идентификатор с помощью yield:

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)