我正在尝试编写一个程序，其代码如下，但是当我将图像拖到页面上时，需要多次尝试才能实际加载它。 这是我的代码：
<html>
<head>
<style>
#main { position:absolute; top:10px; left:50%; margin-left:-450px; width:900px; height:900px; border:dashed 1px lightgrey; padding:1em; }
#trash { background-color:#e9e9e9; margin-top:10px; width:200px; height:200px; border:dotted 4px lightgrey; position:absolute; top:0px; left:5px; margin-left:2em; text-align:center; }
#new { background-color:#e9e9e9; width:200px; height:200px; border:dotted 5px lightgrey; margin-right:1em; margin-bottom:.7em; float:right; }
.new { float:right; margin-right:1.5em; }
.drag { float:left; resize:both; overflow:hidden; height:110px; width:110px; }
.square { background-color:none; width:10px; height:10px; float:left; }
.drag * { resize:none; width:100px; height:100px }
.block { background-color:red; }
</style>
<script src="jq/jquery-1.9.1.js"></script>
<script src="jq/jquery-ui.js"></script>
<script>
if(window.FileReader) {
var imgcontent,imgdropped;
var dropElement;
addEventHandler(window, 'load', function() {
dropElement = document.getElementById('new');
var list = document.getElementById('new');
function cancel(e) {
if (e.preventDefault) { e.preventDefault(); }
return false;
}
// Tells the browser that we *can* drop on this target
addEventHandler(dropElement, 'dragover', cancel);
addEventHandler(dropElement, 'dragenter', cancel);
addEventHandler(dropElement, 'drop', function (e) {
e = e || window.event; // get window.event if e argument missing (in IE)
if (e.preventDefault) { e.preventDefault(); } // stops the browser from redirecting off to the image.
var dt = e.dataTransfer;
var files = dt.files;
for (var i=0; i<files.length; i++) {
var file = files[i];
var reader = new FileReader();
//attach event handlers here...
reader.readAsDataURL(file);
addEventHandler(reader, 'loadend', function(e, file) {
var bin = this.result;
var img = document.createElement("img");
img.file = file;
img.src = bin;
imgcontent = img.outerHTML;
additem();
}.bindToEventHandler(file));
}
return false;
});
Function.prototype.bindToEventHandler = function bindToEventHandler() {
var handler = this;
var boundParameters = Array.prototype.slice.call(arguments);
//create closure
return function(e) {
e = e || window.event; // get window.event if e argument missing (in IE)
boundParameters.unshift(e);
handler.apply(this, boundParameters);
}
};
});
} else {
document.getElementById('status').innerHTML = 'Your browser does not support the HTML5 FileReader.';
}
function addEventHandler(obj, evt, handler) {
if(obj.addEventListener) {
// W3C method
obj.addEventListener(evt, handler, false);
} else if(obj.attachEvent) {
// IE method.
obj.attachEvent('on'+evt, handler);
} else {
// Old school method.
obj['on'+evt] = handler;
}
}
</script>
<script>
var blockcolors = ["red","blue","green","yellow","white","black","lightgrey","lightblue","Chartreuse","Cyan","DarkGoldenRod","SlateGray","Tan","Purple","Maroon","MistyRose"];
var bcolor = 1;
var id = 2;
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
ev.target.appendChild(document.getElementById(ev.dataTransfer.getData("Text")));
}
function droptrash(ev)
{
ev.preventDefault();
$("#"+ev.dataTransfer.getData("Text")).remove();
}
function change(div)
{
var divw=parseInt(div.style.width);
var divh=parseInt(div.style.height);
var imgw=divw-10;
var imgh=divh-10;
div.children[0].style.width=imgw;
div.children[0].style.height=imgh;
div.style.border="dotted 3px grey";
}
function makeGrid()
{
var main = $("#main");
for (var i = 0; i < 8100; i++)
{
var square = document.createElement('div');
square.setAttribute('class', 'square');
square.ondragover = function(event) { event.preventDefault(); };
square.ondrop = function(event) { drop(event); };
main.prepend(square);
}
}
function additem()
{
var newbox = document.getElementById("new");
newbox.innerHTML = '<div id="div'+id+'" class="drag" onmouseout="this.style.border=0" draggable="true" ' +
'ondragstart="drag(event)" onmousemove="change(this)"></div>';
div = document.getElementById("div"+id);
div.innerHTML = $("#newtype").val();
id+=1;
}
function blockcolor(block)
{
block.style.backgroundColor = blockcolors[bcolor];
if (bcolor == blockcolors.length-1)
bcolor = -1;
bcolor++;
}
</script>
</head>
<body onload="makeGrid()" class="new">
<div id="new"></div>
<div style="clear:both"></div>
<select onchange="additem()" value="heading" id="newtype" class="new">
<option onclick="this.value=imgcontent;">Image</option>
<option value="<textarea></textarea>">Text box</option>
<option value="<div onclick='blockcolor(this)' class='block'></div>">Block</option>
<option onclick="this.value='<h1 style=margin:0px>' + prompt('please enter some text') + '</h1>';">heading</option>
<option onclick="this.value='<h3 style=margin:0px>' + prompt('please enter some text') + '</h3>';">sub heading</option>
</select>
<div style="clear:both"></div>
<center>
<div style="clear:both"></div>
<div ID="main" overflow="auto">
</div>
</center>
<div style="clear:both"></div>
<div id="trash" ondragover="event.preventDefault()" ondrop="droptrash(event)" overflow="auto"><big><br />Trash</big></div>
</body>
</html>
我知道很多东西都不起作用，但我最喜欢拖放图像的能力。对不起我的不好解释，我已经十三岁了。