Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
nametux
0 / 0 / 0
Регистрация: 20.07.2014
Сообщений: 10
1

Перетаскивание объектов

20.12.2014, 16:28. Просмотров 711. Ответов 1
Метки нет (Все метки)

Всем доброго времени суток.
Возник вопрос с перетаскиванием изображения в div

Код
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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

Заранее спасибо
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.12.2014, 16:28
Ответы с готовыми решениями:

Перетаскивание элементов DOM
Всем привет. Нашел статью про перетаскивание элементов по странице -...

Перетаскивание внутри определенной рамки
Доброго времени суток. Поместил блок размером 2000х2000 в блок 500х500, на...

Картинка (Перетаскивание по всей странице)
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot;...

Перетаскивание элемента/переместить по клику
Доброго времени суток. &lt;div&gt; &lt;div id=&quot;polosa&quot;&gt;&lt;div...

Перетаскивание данных между двумя ListBox
Хочу на страницу поместить 2 элемента ListBox один заполнить исходными данными,...

1
KillSwitch
329 / 35 / 15
Регистрация: 12.12.2014
Сообщений: 174
24.12.2014, 15:32 2
Лучший ответ Сообщение было отмечено nametux как решение

Решение

1. оберните ваш код в dropImg
Javascript
1
2
3
4
5
if (e.target.className=='drop') {
// 31
// 32
// 33
}
Добавлено через 2 минуты
2. После строки // 33 добавьте свою boolean функцию проверки данных
Javascript
1
2
3
if(validate()) {
    alert('ok');
}
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.12.2014, 15:32

Создание объектов JS
Наткнулся на создание объекта с помощью конструктора (function): var new_obj...

Перебор объектов
Перебираю все методы объекта navigator. И в случаи вложенности возникают...

Движение объектов
Привет, форумчане. В этом посте хочу осветить проблему создания движения...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru