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'));
});
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".
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.
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 .
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.
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With