CODEWITHSUNDEEP
javascripthtml
JoshTheGray
JoshTheGray

Reputation: 117

How to disable "drag" on Table data

https://codepen.io/JoshTheGray/pen/dmmBYe

I'm attempting to disable the ability to "click and drag" colors onto the grid, because when you do so, it fills in the entire grid with the selected color.

So far I've attempted to make add draggable=false to

<table> & every <tr>/<td>, which has no effect.

I also tried adding this to my body tag, which seems to also have no effect.

<BODY ondragstart="return false;" ondrop="return false;">

What am I missing?

Upvotes: 1

Views: 561

Answers (1)

Julien Gr&#233;goire
Julien Gr&#233;goire

Reputation: 17114

Draggable is not the problem, the problem is that the target of the click event will vary if you move the mouse between the mousedown and the mouseup. It's a weird behavior that makes sense in a way. What you could do is replace the click event with mousedown or mouseup, depending on the expected behavior.

mainGrid.addEventListener('mouseup', function(event) {

https://codepen.io/anon/pen/KoGMbE

Upvotes: 1

Related Questions