Javascript-форум - Не работает drag and drop

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)

Не работает drag and drop

Почему пишет, то, что Cannot read property 'addEventListener' of null?

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

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

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

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

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

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

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

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

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

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

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);
*/!*
  }

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

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

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 )))

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

Вот так делай

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;

DivMan,

<!DOCTYPE html>
<html>

  <head>
<style type="text/css">
.con{
      position: absolute;
      width: 100px;
      height: 100px;
      background: green;
    }

</style>
    <meta charset="utf-8">
  </head>

  <body>

<button id="btn">Создать div</button>
  <script>var div2 = document.querySelector('.con')

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);
  }


  btn.onclick = div



  var activeElement;
  var offsetX = 0;
  var offsetY = 0;
  var con = document.querySelector('.con');


  var mDown = function(e){
    console.log('Нажали кнопку мыши',e)
    activeElement = e.target;
    offsetX = e.offsetX
    offsetY = e.offsetY
  }

  var mUp = function(e){
    console.log('Отпустили кнопку мыши')
    activeElement = null
  }



  var mMove = function(e){
    //console.log('Двигаем курсор', e)
    if(activeElement) {//если элемент есть, то есть на него нажали...
      activeElement.style.top = (e.clientY - offsetY) + 'px'
      //установить координату элементу top на текущее положение мышки
      //минус смещение
      //top от начала экрана до начала объекта
      activeElement.style.left = (e.clientX - offsetX) + 'px'
    }
  }
 /*
  if(div2.classList.contains("con")){
    alert('Блок создался')
  }



  con.addEventListener('mousedown', mDown);
  con.addEventListener('mouseup', mUp);*/
  document.addEventListener('mousemove', mMove);


</script>
  </body>

</html>

Ебалайтен блин, все работает, вот так делается, то есть все что надо заранее определить - определяется, а потом уже выполняется.

var con=null,

activeElement,
offsetX = 0,
offsetY = 0,

mDown = function(e){
	console.log('Нажали кнопку мыши',e)
	activeElement = e.target;
	offsetX = e.offsetX
	offsetY = e.offsetY
},	
	
mUp = function(e){
	console.log('Отпустили кнопку мыши')
	activeElement = null
},	


mMove = function(e){

	if(activeElement) {
		activeElement.style.top = (e.clientY - offsetY) + 'px'
		activeElement.style.left = (e.clientX - offsetX) + 'px'
	}
};	


function div(){
	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;

рони,
Сотона опередил )))

Получилось спасибо))