Перетаскивание объекта в определенное место
Всем доброго времени суток.
Возник вопрос с перетаскиванием изображения в 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 заранее спасибо за помощь |
name_tux,
может не мучатся http://jqueryui.com/droppable/ |
Нет у него можно потом объект вытащить. а мне надо его закрепить и в определенном месте
|
Цитата:
|
я ниже приписал что нужно в итоге! Нужно чтобы 1 картинка встала только в 1 див и так последующие и в конце вывод что все наместе
|
name_tux,
var n = 4;
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");
var x = "draggable-element-" + e.target.innerHTML;
if(rdata !=x)return;
e.target.innerHTML = "";
e.target.appendChild(document.getElementById(rdata))
n--;
if(!n)alert("win!")
}
|
Супер ОГРОМНОЕ спасибо. То что нужно!!!
|
| Часовой пояс GMT +3, время: 12:03. |