|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
12.06.2013, 12:19 | #1 |
Пользователь
Регистрация: 04.01.2013
Сообщений: 11
|
Drag'n'Drop проверка
Здравствуйте. По уроку http://ruseller.com/lessons.php?rub=28&id=366 делаю похожую штуку но используя HTML5. Перетаскивание блоков я сделал, но проверку на то, а в правильное место вставили блок, сделать не могу. Помогите разобраться.
|
12.06.2013, 20:02 | #2 |
Пользователь
Регистрация: 04.01.2013
Сообщений: 11
|
Я так понимаю. Есть блок который будет принимательным с именем (id) Zona. У этого блока выставлены координаты absolute:left=X; top=Y;
У блока который перетаскиваем id="box1" тоже есть начальные координаты. Когда мы переместили блок нужно считать его текущие координаты и сделать проверку, если box1, находится в координатах Zona то alert("OK") если нет то alert ("error"). Как мне прописать последний пункт? Как считать координаты? И как будет выглядеть условие проверки? |
12.06.2013, 21:06 | #3 |
Пользователь
Регистрация: 04.01.2013
Сообщений: 11
|
Код. СSS стили те же что и в уроке
Код HTML:
<script type="text/javascript"> <!-- function alDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("content", ev.target.id); } function drop(ev) { ev.preventDefault(); var image= ev.dataTransfer.getData("content"); ev.target.appendChild(document.getElementById(image)); } --> </script> </head> <body> <div id="dhtmlgoodies_dragDropContainer"> <div id="topBar"> </div> <div id="dhtmlgoodies_listOfItems"> <div> <p>Objects to move</p> <ul id="allItems"> <li id="node1" groupId="box2" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Oslo</li> <li id="node2" groupId="box7" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Paris</li> <li id="node3" groupId="box3" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">London</li> <li id="node4" groupId="box5" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Beijing</li> <li id="node5" groupId="box4" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Washington</li> <li id="node6" groupId="box6" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Canberra</li> <li id="node18" groupId="box1" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Rome</li> <li id="node7" groupId="box2" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Geiranger fjord</li> <li id="node8" groupId="box7" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Notre Dame</li> <li id="node9" groupId="box3" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Big Ben</li> <li id="node10" groupId="box5" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">The Forbidden City</li> <li id="node11" groupId="box6" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Queensland</li> <li id="node19" groupId="box1" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Vatican city</li> <li id="node21" groupId="box4" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Mississippi</li> <li id="node12" groupId="box2" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Fridtjof Nansen</li> <li id="node13" groupId="box7" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Napoleon Bonaparte</li> <li id="node14" groupId="box3" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Winston Churchill</li> <li id="node15" groupId="box5" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Mao</li> <li id="node16" groupId="box4" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">John F. Kennedy</li> <li id="node17" groupId="box6" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Ned Kelly</li> <li id="node20" groupId="box1" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="alDrop(event)">Galileo Galilei</li> </ul> </div> </div> <div id="dhtmlgoodies_mainContainer"> <!-- ONE <UL> for each "room" --> <div ondrop="drop(event)" ondragover="alDrop(event)"> <p>Italy</p> <ul id="box1"> </ul> </div> <div ondrop="drop(event)" ondragover="alDrop(event)"> <p>Norway</p> <ul id="box2"></ul> </div> <div ondrop="drop(event)" ondragover="alDrop(event)"> <p>United Kingdom</p> <ul id="box3"> </ul> </div> <div ondrop="drop(event)" ondragover="alDrop(event)"> <p>United States</p> <ul id="box4"></ul> </div> <div ondrop="drop(event)" ondragover="alDrop(event)"> <p>China</p> <ul id="box5"> </ul> </div> <div ondrop="drop(event)" ondragover="alDrop(event)"> <p>Australia</p> <ul id="box6"> </ul> </div> <div ondrop="drop(event)" ondragover="alDrop(event)"> <p>France</p> <ul id="box7"> </ul> </div> </div> </div> |
13.06.2013, 01:37 | #4 |
Пользователь
Регистрация: 04.01.2013
Сообщений: 11
|
Координаты объекта я узнаю. Помогите как то оптимизировать функцию для проверки
Код HTML:
function findPos(){ var img = document.getElementById("box2"); var img2 = document.getElementById("box1"); left1 = img.offsetLeft; top1 = img.offsetTop; left2 = img2.offsetLeft; top2 = img2.offsetTop; var parent = img.offsetParent; var parent1 = img2.offsetParent; while(parent && parent.tagName != "body") { left1 += parent.offsetLeft; top1 += parent.offsetTop; parent = parent.offsetParent; } while(parent1 && parent1.tagName != "body") { left2 += parent1.offsetLeft; top2 += parent1.offsetTop; parent1 = parent1.offsetParent; } alert([left1, top1]); alert([left2, top2]); if ((left1>left2)&&(left1<170)){alert("OK");} } |
07.07.2013, 23:34 | #5 |
Новичок
Джуниор
Регистрация: 07.07.2013
Сообщений: 1
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
excel.Проверка VBA и проверка функции | Будда | Помощь студентам | 0 | 14.04.2011 21:10 |
Drag'n'Drop в Kol'n'Mck | Gr@nd | Общие вопросы Delphi | 1 | 15.08.2009 15:50 |
Drag'n'Drop для каждого компонента | kiber_punk | Общие вопросы Delphi | 16 | 01.12.2008 09:11 |
Drag'n'Drop файла в ListBox | D-Snaker | Компоненты Delphi | 2 | 07.08.2008 15:51 |
Drag'n'drop в Гридах | _SERGEYX_ | БД в Delphi | 1 | 05.09.2007 16:56 |