Elements with unwanted draggable behaviour

46
January 23, 2019, at 02:00 AM

in this snippet I've made a 4x4 grid

This grid have some strange behaviour though : when you "mousedown" on some tile and then move your mouse the grid act like a draggable image (but not all the tiles "travels" with the drag semitransparent feedback...).

How can I prevent this behaviour?

.line{ 
white-space:nowrap; 
} 
.tile{ 
width:25px; 
height:25px; 
border:1px solid black; 
display:inline-block; 
vertical-align: bottom; 
} 
*{ 
margin:0; 
padding:0; 
}
<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
  </head> 
  <body> 
    <div class="line"><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div></div> 
    <div class="line"><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div></div> 
    <div class="line"><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div></div> 
    <div class="line"><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div></div> 
  </body> 
</html>

Answer 1

Find out it seems to be the selection that makes the elements draggable (weird because it happens even if nothing has been selected (highlighted))

A working solution is to prevent the elements from being selected like so:

.tile, .tile::after, .tile::before {
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-app-region: no-drag;
cursor: default;
}
READ ALSO
Call multiple DialogFragments intone one

Call multiple DialogFragments intone one

I'm testing functions on Java, and want to call multiple DialogFragments into one activityI searched for this on the site and encountered two promising leads

27
How to copy a file in multiple threads using Java

How to copy a file in multiple threads using Java

I am learning multithreading in Java, and I have a task to copy a file using 2+ threads

18