如何在拖动成HTML模板时获取重影图像？

Question

我有一个包含多个框的列，每个框中都有一些文本。这些框具有我在创建组件时使用的数据。现在我有一个组件，根据用户选择的内容，组件会有所不同。为了简化这个问题，我们假设该组件看起来像这样：

<div class='rect'>
    <div class='name'>
        {{model.name}}
    </div>
</div>

根据用户拖动的内容，我想创建一个我的rect组件的重影图像，并正确显示模型的名称。现在通常，您可以像这样设置重影：

document.getElementById("drag-something").addEventListener("dragstart", function(e) {
    var crt = this.cloneNode(true);
    crt.style.backgroundColor = "red";
    document.body.appendChild(crt);
    e.dataTransfer.setDragImage(crt, 0, 0);
}, false);

问题是我想传递模板和一些数据。这可能吗？实际上，根据拖动的项目，我的组件会有更多差异，并且会拖动许多不同的项目。是否可以使用模板执行此操作，或者还有其他一些技巧吗？