How to remove border when dragging HTML elements? - html

Question

At least in firefox, when I try to drag an image (the one on the left), I get a thin white border on the bottom and the right. And when I wrap the image in an <a> then I get a red border around the whole thing. How can I drag an element without these borders appearing in both cases? (In the stackoverflow code preview it might not show the border for the image on the left but it shows it if you try with an html file in your browser.)
body {
background-color: black;
}
a {
padding: 30px;
background-color: black;
display: inline-block;
border: none;
}
img {
border: none;
}
<img src="https://picsum.photos/200/200">
<a href>
<img src="https://picsum.photos/200/200">
</a>

Answer 1

This appears to be a usability feature of Firefox, so people know what they're dragging (IIRC, a linked image is just the link while an unlinked image is the image itself). You can fake that out by using onclick instead.
In this sample, I've added a third copy of the sample image (nice random effect, btw). I've changed the mouse cursor to look the way it does for a link and set the link target in the title attribute so it can be seen during a mouseover event. Upon clicking, Javascript will then set the current page location to the contents of that title.
This of course introduces another (imho even worse) usability issue: users can't right-click or middle-click on that link, say to copy the link or open it in a new tab. They (obviously) can't drag the link anywhere either.
(I shrank the images and the padding so they can still appear three abreast in a single non-wrapping row.)
body {
background-color: black;
}
a {
padding: 5px;
background-color: black;
display: inline-block;
border-color: none;
}
a.fake_link[onclick] {
cursor:pointer;
}
img {
border: none;
width: 175px;
}
<img src="https://picsum.photos/200/200">
<a href>
<img src="https://picsum.photos/200/200">
</a>
<a title="https://stackoverflow.com" class="fake_link"
onclick="location.href=this.title">
<img src="https://picsum.photos/200/200">
</a>
(If you want to experiment with that but stay on this page, just change the onclick value to alert(this.title) instead of location.href=this.title)