jQuery pass element to dataTransfer property

Question

Trying to pass a jQuery object to the dataTransfer property during a drag/drop sequence. After adding the property to jQuert.event.props array I'm able to assign it, but it returns undefined on during the drop event. Not sure what I'm missing here- seems really straightforward.

Javascript:

function dragClip(clip, event){

    event.dataTransfer.el = clip;

    /* Console confirms event.dataTransfer.el is the jQuery object */
}

function dropClip(target, event){

    target.append(event.dataTransfer.el);

    /* event.dataTransfer.el no longer has the object... where'd it go?? */
}

jQuery.event.props.push('dataTransfer');

$('#titles')
    .bind('dragenter dragover', false)
    .bind('drop', function(event){

        dropClip($(this), event);
    });

$('.clip').bind('dragstart', function(event){

    dragClip($(this), event);
});

UPDATE:

Rewritten to remove the verbosity. Had included other stuff in there, but an anonymous function will do just fine:

jQuery.event.props.push('dataTransfer');

$('#titles')
    .bind('dragenter dragover', false)
    .bind('drop', function(event){

        $(this).append(event.dataTransfer.el);
    });

$('.clip').bind('dragstart', function(event){

    event.dataTransfer.el = $(this);
});

UPDATE

As per @barney's final answer, my final working code. I noticed that using the original event didn't allow me to pass an object as data, so instead I applied the ID and rebuilt the jQuery object on drop. Also tightened everything up by getting rid of the declared functions. Less code, same result.

$('#titles')
    .bind('dragenter dragover', false)
    .bind('drop', function(event){

        $(this).append($('#' + event.originalEvent.dataTransfer.getData('clip')));
    });

$('.clip')
    .bind('dragstart', function(event){

        event.originalEvent.dataTransfer.setData('clip', $(this).attr('id'));
    });

+1 for this "UPDATE" part.This helped me. – Jangya satapathy Oct 14 '14 at 09:58 — Jangya satapathy, Oct 14 '14 at 09:58

Barney · Accepted Answer · 2013-04-02T21:33:58.373

23

Personally, I try to play with jQuery internals as little as possible and extract the original event object where possible. When using drag and drop in the past, I've always made use of event.originalEvent.dataTransfer.

edited Apr 02 '13 at 21:33

answered Apr 02 '13 at 19:33

Barney

16,181
5
62
76

yeah, I considered something like this. It's just so weird- I should be able to attach the jquery object to the dataTransfer property. I can do it in vanilla JS, not sure why it would work differently in jQuery if dataTransfer's added to the event property array – technopeasant Apr 02 '13 at 19:38
Personally, I try to play with jQuery internals as little as possible. When using drag and drop in the past, I've always made use of `event.originalEvent.dataTransfer`. – Barney Apr 02 '13 at 19:51
1

Funnily enough, using that instead of adding dataTransfer to jQuery works. I've accepted your answer and appreciate the help. Would doubly appreciate if you could append your answer with your suggestion on event.originalEvent for others' reference – technopeasant Apr 02 '13 at 19:57

jQuery pass element to dataTransfer property

1 Answers1