HTML5 拖放 : How do I target the cloned AND original elements?

Question

我想将类名应用于被拖动的“ghost”元素，而不是被克隆的原始元素。这是我为 dragstart 事件准备的函数:

function dragStart(event) {
    event.originalEvent.dataTransfer.effectAllowed = 'move';
    event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));
    console.log(event);
    console.log('Dragging...');
    $(event.currentTarget).addClass('dragging');
    return true;
}

$(event.currentTarget).addClass('dragging'); 行将 .dragging 类添加到原始元素而不是克隆的拖动元素。

如何正确定位两者？

编辑

希望尽可能使用原生 HTML5 来处理这个问题。最好不要使用 jQuery 插件。

Answer 1

在原始元素上添加类，然后在拖动开始后将其删除(demo):

function dragStart(event) {
    var el = $(this);

    event.originalEvent.dataTransfer.effectAllowed = 'move';
    event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));

    el.addClass('dragging');
    setTimeout(function() { el.removeClass('dragging'); }, 0);
}