jQuery UI Drag n Drop failed to lock

jQuery UI Drag n Drop failed to lock

Basically I have an image (droppable) and text (draggable). They are
matched by the data-pair attribute I've set on them. However, when I try
to console.log($(this).data('pair')) inside the drop callback, it gives
undefined. This is my code.
function handleDrop(event, ui, cb) {
console.log( $(this).data('pair') );
console.log( $(this).attr('data-pair') );
console.log( ui.draggable.data('pair') );
var dropped = $(this).data('pair');
var dragged = ui.draggable.data('pair');
var match = false;
if(dragged === dropped) {
//Match - Lock in place and increment found
match = true;
$(this).droppable( 'disable' );
ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );
ui.draggable.draggable( 'option', 'revert', false );
ui.draggable.position({
of: $(this),
my: 'left top',
at: 'left top'
});
} else {
ui.draggable.draggable( 'option', 'revert', true );
}
cb(match);
}
//Create Droppables (image + droppable div)
//imgContainer = #imgWrapper
var tempImgContainer = $('<div id="imgContainer' + i + '"></div>');
$('<img id="img' + i + '" src="' + key + '">').appendTo(tempImgContainer);
$('<div id="textForImg' + i + '" data-pair="' + i + '"></div>').droppable({
accept: '#textWrapper div',
hoverClass: 'hovered',
drop: function(event, ui) {
handleDrop(event, ui, callback);
}
}).appendTo(tempImgContainer);
$(imgContainer).append(tempImgContainer);
//Create Draggable
//textContainer = #textWrapper
var tempTextContainer = $('<div id="textContainer' + i + '" data-pair="' +
i + '">' + val + '</div>').draggable({
//quizContainer is a wrapper for both imgWrapper and textWrapper.
Example #quizContainer1
containment: quizContainer,
stack: '#textWrapper div',
cursor: 'move',
revert: true,
snap: true
});
$(textContainer).append(tempTextContainer);
i += 1;