title: Battleship game in JavaScript - odd cursor behavior (no drop/not allowed) when trying to drag and select ships
body: <p>I've been making a Battleship game, but an odd thing occurs, and it's not reproducible. Sometimes when I try to drag and select ships my cursor turns to no-drop/not-allowed icon and doesn't let me select more than one field on the grid. Example -<a href="https://snipboard.io/YmDtIh.jpg" rel="nofollow noreferrer">https://snipboard.io/YmDtIh.jpg</a>. Also it seems the fields on the grid (which I've implemented using a script to make 100 divs with an id and custom CSS positioning inside the gameboard container) get "lifted" by the cursor, as if the browser thinks I want to move whole gameboard container, instead of selecting fields for the ship. For drag and select I've made two event listeners - onmousedown to figure out the start of the selection, and onmouseup which is more complex and in addition to tracking where was the mouse released validates if the choice is regular (for example, I place an alert if a user tries to select more than 4 fields in a row/col, because the largest ship is 4 fields long. Does anyone have an idea about the reason behind this odd cursor behavior? It happens both in Chrome and Firefox. </p>