HTML5拖放:如何定位克隆的AND原始元素？

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

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

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);
}

Answer 2

我不是一个狂热的 JavaScript 脚本编写者，但我在试图为您找到一些东西时偶然发现了这个页面，它可能就是您所需要的，特别是代理拖动版本：

http://tridubmedia.com/demo/drag/

$('#demo6_box')
        .bind('dragstart',function( event ){
                if ( !$(event.target).is('.handle') ) return false;
                return $( this ).css('opacity',.5)
                        .clone().addClass('active')
                        .insertAfter( this );
                })
        .bind('drag',function( event ){
                $( event.dragProxy ).css({
                        top: event.offsetY,
                        left: event.offsetX
                        });
                })
        .bind('dragend',function( event ){
                $( event.dragProxy ).remove();
                $( this ).animate({
                        top: event.offsetY,
                        left: event.offsetX,
                        opacity: 1
                        })
                });

这就是 jQuery 的全部内容。