I want to have the click and drag functionality that Raphael.js provides, an example here: <https://qiao.github.io/PathFinding.js/visual/>.

The way you add and remove obstacles is great, it's essentially combining mousedown event and hover. But how on earth is that done? Any help please?

The closest I have is: <https://codepen.io/ProgrammingKea/pen/ZowWJx> 

The salient bit is

```
  div.addEventListener("mousedown", function(ev){
     this.classList.add("obstacle");
     });
     div.addEventListener("mousemove", function(ev){
     this.classList.add("obstacle");
     });
     div.addEventListener("mouseup", function(ev){
     this.classList.add("obstacle");
     });

```

If you press large, then hover over the grid, that's the closest I've got.

But my issue is that its only hover here, I don't have the click functionality the above link does

Please post answers containing only vanilla JS