Как убрать границу при перетаскивании HTML элементов?

Question

По крайней мере, в firefox, когда я пытаюсь перетащить изображение (изображение слева), я получаю тонкую белую рамку снизу и справа. И когда я обертываю изображение в <a>, я получаю красную рамку вокруг всего этого. Как я могу перетащить элемент без появления этих границ в обоих случаях? (В предварительном просмотре кода stackoverflow он может не отображать границу для изображения слева, но он показывает это, если вы пытаетесь с файлом html в вашем браузере.)

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

Похоже, что это удобство использования Firefox, поэтому люди знают, что они перетаскивают (IIR C, связанное изображение - это просто ссылка, а несвязанное изображение - само изображение). Вы можете подделать это, используя вместо этого onclick .

В этом примере я добавил третью копию образца изображения (хороший случайный эффект, кстати). Я изменил курсор мыши, чтобы он выглядел так же, как и для ссылки, и установил цель ссылки в атрибуте title, чтобы ее можно было увидеть во время события наведения мыши. После нажатия Javascript затем установит текущее местоположение страницы на содержимое этого title.

. Это, конечно, вызывает еще одну (еще более ужасную) проблему с удобством использования: пользователи не могут щелкнуть правой кнопкой мыши или выбрать среднюю - нажмите на эту ссылку, скажем, чтобы скопировать ссылку или открыть ее в новой вкладке. Они (очевидно) также не могут никуда перетаскивать ссылку.

(я сжал изображения и отступы, чтобы они все еще могли отображаться три в одном ряду без переноса.)

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;
}

(Если вы хотите поэкспериментировать с этим, но остаетесь на этой странице, просто измените значение onclick на alert(this.title) вместо location.href=this.title)