Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery pass element to dataTransfer property

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'));
    });
like image 324
technopeasant Avatar asked Apr 02 '13 19:04

technopeasant


People also ask

How do you initialize a DataTransfer object?

The DataTransfer() constructor, when invoked, must return a newly created DataTransfer object initialized as follows: Set the drag data store's item list to be an empty list. Set the drag data store's mode to read/write mode. Set the dropEffect and effectAllowed to "none".

What is event DataTransfer setData?

The DataTransfer. setData() method sets the drag operation's drag data to the specified data and type. If data for the given type does not exist, it is added at the end of the drag data store, such that the last item in the types list will be the new type.

What is DataTransfer in Javascript?

The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. For more information about drag and drop, see HTML Drag and Drop API. This object is available from the dataTransfer property of all drag events .

Does jQuery have an event object?

jQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler. Most properties from the original event are copied over and normalized to the new event object.


1 Answers

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.

like image 50
Barney Avatar answered Oct 04 '22 15:10

Barney