jQuery .attr() undefined only in Chrome

I'm making an HTML5 tech demo for work in which a user can drag "apps" off a menu onto the screen and they'll appear in moveable and re-sizable iframes on the page. This all works well and good in Firefox, but when I try it in Chrome (Which supports more HTML5 features) it tries to load the url "undefined" in whatever directory I开发者_JAVA百科'm in. Heres my code.

$(".menu-app")
                .attr("draggable", "true")
                .bind("dragstart", function(ev) {
                    var dt = ev.originalEvent.dataTransfer;
                    var src = $(this).attr("value");
                    dt.setData("src", src);
                    return true;
                    })
                .bind("dragend", function() {
                    return false;
                    });
            $("#content")
                .bind("dragenter", function() {
                    return false;
                    })
                .bind("dragleave", function() {
                    return false;
                    })
                .bind("dragover", function() {
                    return false;
                    })
                .bind("drop", function(ev) {
                        var dt = ev.originalEvent.dataTransfer;
                        $("#content").html($("#content").html()+
                            "<div class='app'><iframe width='100%' height='100%' frameborder='0' src='"+
                                dt.getData("src")+"'></iframe></div>");
           // Make application windows draggable and resizable 
           $(".app").resizable({grid:20}).draggable({grid:[20,20]}).addClass("ui-widget-content");
                    return false;
                    });

Turns out the issue wasn't in jQuery at all. It was because chrome only supports 2 data types with drag and drop: "Url", and "Text". Switching dt.setData("src", src); to dt.setData("Text", src); solved the problem.