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

[DivMan]

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

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

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

[by chris]

@DivMan, как интерпретатор  выполняет код в момент его загрузки? Рассказывай.

[DivMan]

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

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

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

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

[by chris]

18 минут назад, DivMan сказал:

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

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

[Igor Schnaider]

10 часов назад, DivMan сказал:

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

Блок не будет создан, пока условие не будет выполнено. А в этот момент блок .div2 еще не существует. Вот и не работает.

[by chris]

@Igor Schnaider, пока @DivMan, не начнет думать. ничего не будет существовать, создавать и работать.  

[Igor Schnaider]

Ну он же учится, так что нормально все :-)

@DivMan, если трудности с пониманием того, в каком порядке должны работать асинхронные callback функции, просто помни, что в JS все работает последовательно. Пока не выполниться текущий код, следующий не начнется. Асинхронные callback функции всегда сработают только после того, как подпрограмма, в которой мы назначаем их, выполнит свой код. В твоем примере, соответственно - пока основная программа не выполнит свой код (куда входит в том числе и проверка на существование класса).
Даже если предположить, что ты со скоростью света кликнешь на кнопке, после того как уже назначен обработчик события, но не остальной код (тут проверка IF), callback все равно будет ждать в очереди. Когда стек вызовов освободиться, туда попадет эта callback функция и будет выполнена (а только здесь мы добавим класс элементу).

Edited July 21, 2016 by Igor Schnaider

[by chris]

@Igor Schnaider, слишком заумно пишешь) Т.е прочитав твой пост, @DivMan, должен написать такой код с колбеком?)

function create(callback){
    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 = document.querySelector('.con');
    callback(div);
}

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

 

[Igor Schnaider]

В его примере достаточно в самой callback функции вызывать, что там нужно.

btn.onclick = div

То есть в вот эту функцию div и поместить alert.

@by chris, в твоем примере, кстати, mDown тоже никогда не выполнится.

Edited July 21, 2016 by Igor Schnaider

[by chris]

30 минут назад, Igor Schnaider сказал:

в твоем примере, кстати, mDown тоже никогда не выполнится.

Возможно я плохо понимаю колбэки. Т.е в примере mDown не выполняется?

https://plnkr.co/edit/F4bA9TqZw1mjhb8uPJAN?p=info

[Igor Schnaider]

7 минут назад, by chris сказал:

Т.е в примере mDown не выполняется?

Ты же здесь mousedown вешаешь уже после того, как click сработал.

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

54 минуты назад, by chris сказал:

Т.е прочитав твой пост, @DivMan, должен написать такой код с колбеком?)

Почему нет?

Edited July 21, 2016 by Igor Schnaider

[by chris]

1 час назад, Igor Schnaider сказал:

Почему нет?

Пусть тс перепишет свой код используя колбэк исходя из твоего объяснения). Ждем)

[Igor Schnaider]

10 минут назад, by chris сказал:

Пусть тс перепишет свой код используя колбэк исходя из твоего объяснения). Ждем)

Я объяснить пытался принцип того, как работает порядок выполнения кода в JS. Может коряво, конечно, вышло :-)
Вот пример собрал, может поможет. Видно, что хоть клик браузер и перехватывает, пока в коде задержка, callback, переданный в addEventListenerб все равно срабатывает только после выполнения остального кода. Вот поэтому и условие в его коде тоже никогда не выполнится.

[by chris]

7 часов назад, Igor Schnaider сказал:

Вот пример собрал

надеюсь не зря))