Drag, drop элементов

Вопрос-ответ JavaScript
1

Как сделать так, чтобы при перемещении drag2 в Box1, выходило сообщение- “перемещение невозможно”, и наоборот, при перемещении
drag1 в Box2, выходило сообщение - “перемещение невозможно”.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#div1 {
width: 185px;
height:60px;
padding: 50px;
border: 1px solid #aaaaaa;
background-color: pink; }
#div2 {
width: 185px;
height: 60px;
padding: 50px;
border: 1px solid #aaaaaa;
background-color:yellow; }
</style>
</head>
<script>
var a=3;
function allowDrop1(evrs,ev) {
evrs.preventDefault();
}
function allowDrop2(ev) {
ev.preventDefault();
}
function drag1(evrs) {
evrs.dataTransfer.setData("text1", evrs.target.id);
}
function drag2(ev) {
ev.dataTransfer.setData("text2", ev.target.id);
}
function drop1(evrs) {
evrs.preventDefault();
var data = evrs.dataTransfer.getData("text1");
console.log(data+',data1');
if(data == evrs.dataTransfer.getData("text1"))
{evrs.target.appendChild(document.getElementById(data));
console.log(data+',3data')
console.log(data+',4data')}
else 
{document.getElementById("demo").innerHTML='перемещение невозможно';
document.getElementById("demo").style.color='red';
}}
function drop2(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text2");
ev.target.appendChild(document.getElementById(data));}
</script>
<CENTER><table><tr>
<td><div id="div1" ondrop="drop1(event)" ondragover="allowDrop1(event)" >1 BOX</div></td>
<td><div id="div2" ondrop="drop2(event)" ondragover="allowDrop2(event)" >2 BOX</div></td>
<table><tr><td>
</CENTER>
<p id="drag1"  draggable="true" ondragstart="drag1(event)" >drag1</p>
<p id="drag2" draggable="true" ondragstart="drag1(event)" >drag1</p>
<p id="drag3"  draggable="true" ondragstart="drag2(event)" >drag2</p>
<p id="drag4" draggable="true" ondragstart="drag2(event)" >drag2</p>
<div id='demo'></div>
</body>
</html>
2

Проблема в том, что в этой строке

if(data == evrs.dataTransfer.getData("text1"))

И data и evrs.dataTransfer.getData("text1") могут быть пустой строкой, что, собственно и происходит (функция drag1 не вызывается, поэтому свойства не назначаются). А при сравнении пустой строки с пустой строкой мы получаем true.
Но, поскольку в data никакой id не попал, то document.getElementById(data) ничего не возвращает и мы получаем ошибку

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Можно починить простой проверкой, что data не пустой:

if(data && data == evrs.dataTransfer.getData("text1"))
1 лайк
3

Спасибо за ответ. Можно ли этот код сократить как-нибудь?

4

Лучше поздно, чем никогда :) Сократить, конечно, можно.
Начать проще всего с повторяющихся функций:

Полностью одинаковые:

function allowDrop1(evrs,ev) {
	evrs.preventDefault();
}

function allowDrop2(ev) {
	ev.preventDefault();
}

Почти одинаковые:

function drag1(evrs) {
	evrs.dataTransfer.setData("text1", evrs.target.id);
}

function drag2(ev) {
	ev.dataTransfer.setData("text2", ev.target.id);
}

Превращаются в

function preventDefault (ev) {
	ev.preventDefault();
}

function drag(data) {
	return function (ev) {
		ev.dataTransfer.setData(data, ev.target.id);
	}
}

И разметка, соответственно, в

<p id="drag1" draggable="true" ondragstart="drag('text1')(event)">drag1</p>
<p id="drag2" draggable="true" ondragstart="drag('text1')(event)">drag1</p>
<p id="drag3" draggable="true" ondragstart="drag('text2')(event)">drag2</p>
<p id="drag4" draggable="true" ondragstart="drag('text2')(event)">drag2</p>

Но главная проблема в функциях drop. Там слишком много манипуляций, из-за этого очень легко допустить ошибку. Нужно подумать, что можно выкинуть:

  • нужны ли нам оба ключа text1 и text2?
  • можно ли обойтись вообще без dataTransfer?