Drag'n'Drop проверка - JavaScript, Ajax

Canabalt · 12.06.2013, 12:19

Здравствуйте. По уроку http://ruseller.com/lessons.php?rub=28&id=366 делаю похожую штуку но используя HTML5. Перетаскивание блоков я сделал, но проверку на то, а в правильное место вставили блок, сделать не могу. Помогите разобраться.

Canabalt · 12.06.2013, 20:02

Я так понимаю. Есть блок который будет принимательным с именем (id) Zona. У этого блока выставлены координаты absolute:left=X; top=Y;
У блока который перетаскиваем id="box1" тоже есть начальные координаты.
Когда мы переместили блок нужно считать его текущие координаты и сделать проверку, если box1, находится в координатах Zona то alert("OK") если нет то alert ("error").

Как мне прописать последний пункт? Как считать координаты? И как будет выглядеть условие проверки?

Canabalt · 12.06.2013, 21:06

Код. С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>

Canabalt · 13.06.2013, 01:37

Координаты объекта я узнаю. Помогите как то оптимизировать функцию для проверки

Код 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");}
}

barsev · 07.07.2013, 23:34

http://samscript.narod.ru/scripts/my_test/my_test.htm

12.06.2013, 12:19	#1
Canabalt Пользователь Регистрация: 04.01.2013 Сообщений: 11	Drag'n'Drop проверка Здравствуйте. По уроку http://ruseller.com/lessons.php?rub=28&id=366 делаю похожую штуку но используя HTML5. Перетаскивание блоков я сделал, но проверку на то, а в правильное место вставили блок, сделать не могу. Помогите разобраться.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
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

12.06.2013, 20:02	#2
Canabalt Пользователь Регистрация: 04.01.2013 Сообщений: 11	Я так понимаю. Есть блок который будет принимательным с именем (id) Zona. У этого блока выставлены координаты absolute:left=X; top=Y; У блока который перетаскиваем id="box1" тоже есть начальные координаты. Когда мы переместили блок нужно считать его текущие координаты и сделать проверку, если box1, находится в координатах Zona то alert("OK") если нет то alert ("error"). Как мне прописать последний пункт? Как считать координаты? И как будет выглядеть условие проверки?

07.07.2013, 23:34	#5
barsev Новичок Джуниор Регистрация: 07.07.2013 Сообщений: 1	http://samscript.narod.ru/scripts/my_test/my_test.htm