Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Не работает drag and drop (https://javascript.ru/forum/misc/64116-ne-rabotaet-drag-drop.html)

DivMan 20.07.2016 17:18

Не работает drag and drop
 
Почему пишет, то, что Cannot read property 'addEventListener' of null?

А если сделать без функции, то всё работает

http://plnkr.co/edit/VpsFj0r8cMIxYKNMqOa5?p=preview

рони 20.07.2016 17:35

DivMan,
почему вы назначаите 'addEventListener' несуществующему элементу ?
создали тогда и назначили обработку событий. иначе читайте про делегирование.

Dilettante_Pro 20.07.2016 17:48

рони,
пардон, погорячился...

DivMan 20.07.2016 18:19

А для чего в этом примере https://jsfiddle.net/2LL5160t/
return false, если и без него всё работает?

рони 20.07.2016 18:23

DivMan,
добавьте сверху меню очень много текста и уберите return false

DivMan 20.07.2016 19:12

А теперь почему не появляется alert?

Я же проверил, есть ли у дива класс con

После того, как блок создался, должно выполнится условие, а почему оно не выполняется?

http://plnkr.co/edit/Xu0ZmYGVdSCdBy2axgEq?p=preview

рони 20.07.2016 19:24

DivMan,
совет прежний, создали элемент тогда присвоили ... строки 57-58 должны находится в функции div() в конце

function div(){
    var div = document.createElement('div');
    div.style.width='100px';
    div.style.height='100px';
    div.style.backgroundColor="green";
    div.setAttribute('class', 'con');
    document.body.insertBefore(div, document.body.firstChild);
*!*
    div.addEventListener('mousedown', mDown);
    div.addEventListener('mouseup', mUp);
*/!*
  }

warren buffet 20.07.2016 19:38

ТС не тупи, див создается _после_ нажатия кнопки, которое произойдет через миллион лет в летосчислении компа, после того как скрип закончится.

Так не делается. Событие должно завершится чем-то осмысленным и полезным, в смысле обработка события.

var div2 = document.querySelector('.con')

function div(){
	var div = document.createElement('div');
	/* бла-бла */
	document.body.insertBefore(div, document.body.firstChild)
}

/* это случится ПОТОМ, через миллиарды тиков процессора */
btn.onclick = div

/* а это случается через 1 тик после предыдущей строки */
var con = document.querySelector('.con');


Разумеется того, что произойдет в будущем, в настоящем нету. То есть тут просто полное непонимание event driven application )))

DivMan 20.07.2016 19:45

засунул я эти строки в функцию, всё равно не работает http://plnkr.co/edit/mL4iwuUgwSQjLRLcnvyU?p=preview

warren buffet 20.07.2016 19:50

Вот так делай

function div(){
	var con=mk_div('con');
	con.addEventListener('mousedown', mDown);
	con.addEventListener('mouseup', mUp);
	document.addEventListener('mousemove', mMove);
}

function mk_div(rule){
	var div = document.createElement('div'),
	style=div.style;
	style.width='100px';
	style.height='100px';
	style.backgroundColor="green";
	div.className=rule;
	return document.body.insertBefore(div, document.body.firstChild)
}

btn.onclick = div;


Часовой пояс GMT +3, время: 15:26.