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.
精彩评论