Как сделать так, чтобы при перетаскивании изображения в Firefox не было «Призрака»? - PullRequest
Новая
       8

Как сделать так, чтобы при перетаскивании изображения в Firefox не было «Призрака»?

4 голосов
/ 03 декабря 2009

Когда вы перетаскиваете изображение, появляется полупрозрачное призрачное изображение, которое следует за мышью, когда вы удерживаете его нажатым.

Есть ли способ применить CSS / JS для устранения этого эффекта на определенной части?

Ответы [ 7 ]

7 голосов
/ 26 февраля 2016

Самый простой способ - установить очень большие x и y координаты на setDragImage, чтобы они были удалены от экрана. Например: 

element.addEventListener('dragstart', function(event) {
    event.dataTransfer.setDragImage(element, -99999, -99999);
}, false);

Фактический элемент, который вы передаете setDragImage, на самом деле не имеет значения. Мы используем тот же элемент здесь для удобства.

6 голосов
/ 03 декабря 2009

Единственный способ отключить это в браузере (он делает то же самое в Safari) - вернуть false из события onmousedown элемента img (или event.preventDefault()) и обработать остальные операции перетаскивания с JavaScript.

Практически во всех основных библиотеках JavaScript есть поддержка «перетаскивания» и «отбрасывания». Вы можете использовать их код в качестве отправной точки или просто использовать его напрямую, если вы уже используете библиотеку на своей странице.

2 голосов
/ 28 августа 2012

Просто добавьте атрибут draggable="false" к изображению. Также добавьте контейнер div.

* 1005 Е.Г. * 

<div draggable="true">
<img draggable="false" src="your/path/to/image.png"/>
Optional Text
<div>

Также добавьте 

function handleDragStart(e) {
  // other code
  var dragIcon = document.createElement('img');
  dragIcon.src = 'another/image/path.png';
  e.dataTransfer.setDragImage(dragIcon, -10, -10);
  // other code
}
1 голос
/ 03 декабря 2009

Вам необходимо вернуть false из события ondragstart. У меня была эта проблема сама, и вот как я решил ее. Это проблема и в IE7. Проблема заключается в перетаскивании API в IE, его стандартизации в html5 и последующей реализации Firefox.

Другие предложения по использованию библиотеки JavaScript для перетаскивания не будут работать. (Я уже использовал JQuery UI), так как это недавно появилось в Firefox, и JQuery UI, похоже, не объясняет это.

1 голос
/ 03 декабря 2009

Вы можете попробовать использовать фоновые изображения css вместо реальных изображений с тегом img.

0 голосов
/ 03 декабря 2009

В about:config есть опция Firefox, чтобы отключить это - nglayout.enable_drag_images - но, очевидно, это будет работать только для вас. Я предполагаю, что вы хотите удалить его для всех посетителей?

Если вы хотите сделать drag & drop, возможно, попробуйте jQuery UI или другую библиотеку JS? Вы должны быть в состоянии перемещать другие элементы довольно легко, и вы можете использовать фоновое изображение, как сказал Тим на одном из них.

Еще одним преимуществом является то, что вы можете использовать CSS-эффекты спрайтов для сокращения HTTP-запросов. Я создал головоломку с пользовательским интерфейсом jQuery, которая на самом деле представляет собой только одно изображение, но выглядит как несколько.

0 голосов
/ 03 декабря 2009

Боюсь, это поведение / функция браузера. Я не уверен в каком-либо конкретном стиле FF CSS, который может с этим справиться.

Возможно, вы захотите изменить код Firefox, чтобы иметь свой собственный Firefox. Если вы ищете какие-то средства, чтобы сделать это не программно, я думаю, вы должны написать на superuser.com: P

...