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 -https://snipboard.io/YmDtIh.jpg. 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.
Asked
Active
Viewed 134 times
0
-
I have an idea about it, but I would not dare to answer your question before I see your code, namely, your HTML structure and your drag events. – Lajos Arpad May 08 '20 at 10:22
-
I think I've just figured it out by using the following properties inside tag: ondragstart="return false;" ondrop="return false;" thanks to this question: [link](https://stackoverflow.com/questions/704564/disable-drag-and-drop-on-html-elements). However, I'll still update the question with the source code, thanks for pinpointing which parts are minimal for the problem. – Mladenka Orlić May 08 '20 at 10:32