возникли проблемы.Как только я уронил изображение в левое поле, оно не отображается.Вот что происходит: прежде чем я перетащить изображение.http://i.imgur.com/xIWDD.png После перетаскивания изображения.это не отображает.http://i.imgur.com/vOOIm.png
ошибка в Chrome говорит:
GET файл: /// C: /% 22test Удалено angelo.js: 42 leftbox.innerHTML = e.dataTransfer.getData ('text«);
Вот мой HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>angelos site</title>
<link rel="stylesheet" href="main.css">
<script src="angelo.js"></script>
</head>
<body>
<section id="leftbox">
i dare you to drop an image inme.
</section>
<section id="rightbox">
<img id="facepic" src="C:\test\face.png">
</section>
</body>
</html>
Вот мой JS.
function doFirst(){
mypic=document.getElementById('facepic');//tell js to recognize facepic.
mypic.addEventListener("dragstart",startDrag,false);//when you start dragging facepic run startDrag function. "dragstart" is keyword in java that recognizes when you start dragging an object.
leftbox=document.getElementById('leftbox'); //tell js to recognize leftbox.
leftbox.addEventListener("dragenter",function(e){e.preventDefault();},false);//make same for all browsers.need to override. we arent using this.
leftbox.addEventListener("dragover",function(e){e.preventDefault();},false);//make same for all browsers.need to override. we arent using this.
leftbox.addEventListener("drop",dropped,false);//call function dropped.
}
function startDrag(e){
var code='<img src="C:\test\face.png">';
e.dataTransfer.setData('Text',code);
}
Вот мой CSS
#leftbox{
float:left;
width:250px;
height:250px;
margin:5px;
border:3px solid blue;
}
#rightbox{
float:left;
width:250px;
height:250px;
margin:5px;
border:3px solid green;
}