Can I access jquery.data within a callback function?

Question

I am creating a number of divs on the fly and make them droppable. That works well and I can drop the draggables and the function droppable() is actually reached. In order to do some tests, I need to access data I attach to the divs: jQuery.data(this,"pos") and compare it to the data I attached to the draggable divs.

The problem is that ep and fp are undefined.

            document.write("<div id='tar_"+i+"' class='droppable' style='position:fixed;z-index:10;top:"+tar_y+"px; left:"+x+"px;'>"+phrase.charAt(i)+"</div>");
            var tar = $( "#tar_"+i );
            targets.push(tar);
            jQuery.data(targets[i],"pos",i);
            targets[i].droppable({
            drop: function( event, ui ) {
                var ep = jQuery.data(this,"pos");
                var fp = jQuery.data(ui.draggable,"expos");
                if(ep==fp) {
                    alert("great");
                } else {
                    alert("next time");
                }
              }
            });

Is it at all possible to access jquery.data within this context?

As suggested, I tried the below but ep and fp are still undefined.

            drop: function( event, ui ) {
                var ep = $(this).data("pos");
                var fp = $(ui.draggable).data("expos");
                if(ep==fp) {
                    alert("great");
                } else {
                    alert("next time");
                }
              }
            });

Another suggestion:

            drop: function( event, ui ) {
                var ep = jQuery.data(targets[i],"pos");
                var fp = jQuery.data(letters[i],"pos");;
                if(ep==fp) {
                    alert("great");
                } else {
                    alert("next time");
                }
              }
            });

Leads to:
"Uncaught TypeError: Cannot read property 'nodeType' of undefined"
which probably makes sense since the local variable i is not really available when the drop function is called.

A bit more context

        for(i=0; i<phrase.length; i++) {
            document.write("<div id='chr_"+i+"' class='draggable' style='position:fixed;z-index:10;top:"+y+"px; left:"+x+"px;'>"+phrase.charAt(i)+"</div>");
            var src = $( "#chr_"+i );
            letters.push(src);
            letters[i].draggable({
                    drag: function( event, ui ) {
                        jQuery.data(ui,"moving",false); //need to access the stored data here what doesn't seem to work like this.
                    }
                  });
            jQuery.data(letters[i],"moving",true);
            jQuery.data(letters[i],"expos",i);
            document.write("<div id='tar_"+i+"' class='droppable' style='position:fixed;z-index:10;top:"+tar_y+"px; left:"+x+"px;'>"+phrase.charAt(i)+"</div>");
            var tar = $( "#tar_"+i );
            targets.push(tar);
            jQuery.data(targets[i],"pos",i);
            targets[i].droppable({
            drop: function( event, ui ) {
                //need to access the data here, 
                //but doesn't seem to work in the 
                //following ways (t1-3):
                var t1 = $(this).data("pos");
                var t2 = jQuery.data(targets[i],"pos");  
                var t3 = jQuery.data($(ui.draggable),"expos");
                if(ep==fp) {
                    alert("great");
                } else {
                    alert("next time");
                }
              }
            });
        }

What am I doing wrong?

Answer 1

Notice correct use of jQuery.data:

jQuery.data( element, key, value )

element is supposed to be a DOM element, not a jquery object. That's why when trying to retrieve the data you get undefined.

Try setting the data like this

jQuery.data(targets[i][0],"pos",i);

or

jQuery.data(targets[i].get(0),"pos",i);

---

Edit
Another option, is using the .data method on the jQuery object directly. Setting like this:

targets[i].data("pos",i);

and then

$(this).data("pos");