Всем доброго времени суток.
Возник вопрос с перетаскиванием изображения в div
<html>
<body>
<style>
#drop{
width:120px;
height:120px;
border:1px solid #ccc;
padding:10px;
float:left;
}
.main{
width:285px;
height:285px;
border:1px solid #ccc;
padding:10px;
margin:auto;
}
</style>
<script>
function makeDroppable(e) {
e.preventDefault();
}
function dragImg(e) {
e.dataTransfer.setData("text/plain",e.target.id);
}
function dropImg(e) {
e.preventDefault();
//При извлечении данных Вы должны использовать такой же тип как и при их сохранение
var rdata = e.dataTransfer.getData("text/plain");
//Очистим содержимое перетаскиваемого элемента
e.target.innerHTML="";
//Сделаем перетаскиваемый элемент элементом потомком принимающей области т.е. фактически мы
//переносим его в содержимое принимающего его элемента
e.target.appendChild(document.getElementById(rdata))
}
</script>
<div class=main>
<div id="drop" ondrop="dropImg(event)" ondragover="makeDroppable(event)">1</div>
<div id="drop" ondrop="dropImg(event)" ondragover="makeDroppable(event)">2</div>
<div id="drop" ondrop="dropImg(event)" ondragover="makeDroppable(event)">3</div>
<div id="drop" ondrop="dropImg(event)" ondragover="makeDroppable(event)">4</div>
</div>
<br><br><br />
<p>Перетащите элементы</p>
<img src="01.png" draggable="true" width="120px" ondragstart="dragImg(event)" id="draggable-element-1">
<img src="02.png" draggable="true" width="120px" ondragstart="dragImg(event)" id="draggable-element-2">
<img src="03.png" draggable="true" width="120px" ondragstart="dragImg(event)" id="draggable-element-3">
<img src="04.png" draggable="true" width="120px" ondragstart="dragImg(event)" id="draggable-element-4">
</body>
</html>
Все перетаскивается как надо. Хотелось бы его улутшить:
1. чтобы изображения можно было перетащить в определенный div
2. когда все заполнено правильно выводилось сообщение что все ok (типа alert("ok"))
посмотреть можно тут:
http://borgomotov.zz.mu/index-2.html
заранее спасибо за помощь