Перетаскиваемый элемент JQuery с изображением - проблемы с перетаскиванием в IE и Chrome

Question

У меня есть div, которые определены как draggables. Div содержит одно изображение и текст каждый. Перетаскивание отлично работает в Firefox и Opera, но в Chrome и IE я могу начать перетаскивание только по тексту, а не по изображению. Когда я размышляю над изображением в IE и Chrome, включается встроенная в браузер функция перетаскивания элемента html - пытается перетащить только элемент изображения (например, вырезать и вставить). Как я могу переопределить это?

Answer 1

Нашел простое решение случайно (без использования css background). Просто добавьте draggable="false" атрибут к вашему изображению. Это отключит перетаскивание «функция»:)

<img draggable="false" src="http://www.google.com/intl/en_com/images/srpr/logo1w.png"/>

Может быть установлен также из javascript, img.draggable = "false";

Answer 2

О, черт, я просто поместил изображение как фоновое изображение на один из элементов div внутри перетаскиваемого элемента. Решил проблему, ура.

ЕСТЬ ВСЕ ХАКИ

Answer 3

Недавно у меня тоже была эта проблема, и я обнаружил, что решение заключается в специфике вашего селектора jQuery.

Предполагая, что:

<div class="albumItem draggable">
  <img src="#" alt="#" />
</div>

Просто выполнение этого вызывает проблему в IE / Chrome:

$('.draggable').draggable();

Вместо этого будьте более конкретны:

$('.albumItem.draggable').draggable();

Не уверен, что происходит в IE / Chrome за кулисами, которые вызывают эту проблему, но более конкретные селекторы jQuery помогли мне.

Answer 4

Вы также можете добавить style="block" к изображению.