Drag events does not fire

Asked Jan 18 '19 at 06:43

Active Jan 18 '19 at 06:43

Viewed 121 times

I am trying to make a div list draggable. I tried using drag events however, when I debug, I realize that it even does not get into the functions. What may be the problem? Here is my code:

setDragDrop() {
    const cols = document.querySelectorAll('.slide');
    [].forEach.call(cols, (col) => {
        col.setAttribute('draggable', 'true');
        col.addEventListener('dragstart', (e) => {
            e.preventDefault();
            e.stopPropagation();
            col.bool = false;
            e.dataTransfer.effectAllowed = 'move';
            col.layer.dragSrcEl_ = col;
            col.classList.add('moving');
        }, true);
        col.addEventListener('dragenter', (e) => {
            col.classList.add('over');
        }, false);
        col.addEventListener('dragover', this.handleDragOver, false);
        col.addEventListener('dragleave', (e) => {
            col.classList.remove('over');
        }, false);
        col.addEventListener('drop', this.handleDrop, false);
        col.addEventListener('dragend', this.handleDragEnd, false);
    });

}

asked Jan 18 '19 at 06:43

beginner_

Before anything, using arrow function as event handler is a bad choice. Are you using `this` inside any handler? – Rajesh Jan 18 '19 at 06:49
I want to write as ES6 syntax – beginner_ Jan 18 '19 at 06:52
2

You want to write code in modern style that does not mean you have to use arrow function everywhere. People introduced it for a reason. If you use it without a thought, you'll endup wasting more time in fixing issue. – Rajesh Jan 18 '19 at 06:54
Also if I remember correctly arrow method and foreach does not supported in IE, so if you want cross browser support then do not use them. – maximelian1986 Jan 18 '19 at 06:58
Do you allow JQuery or only pure javascript? – maximelian1986 Jan 18 '19 at 07:05
I prefer pure javascript – beginner_ Jan 18 '19 at 07:07

Drag events does not fire

0 Answers0