CSS / JS, чтобы предотвратить перетаскивание призрачного изображения?

Question

Есть ли способ запретить пользователю видеть призрак изображения, которое он пытается перетащить (не забота о безопасности изображений, а восприятие).

Я пытался это исправить проблему с выделением синим цветом текста и изображений, но не с призрачным изображением:

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

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

Answer 1

Для атрибута draggable можно установить значение false в коде разметки или JavaScript.Смотрите это демо .

<img id="myImage" draggable="false" src="http://placehold.it/150x150">

Answer 2

Я думаю, вы можете изменить

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

на

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

Answer 3

Попробуйте:

img{pointer-events: none;}

и попытайтесь избежать

*{pointer-events: none;}

Answer 4

Вы можете использовать свойство CSS для отключения изображений в браузерах webkit.

img{-webkit-user-drag: none;}

Answer 5

Обработка события dragstart и return false.

Answer 6

Это отключит перетаскивание изображения в во всех браузерах , сохраняя при этом другие события, такие как нажатие и наведение.Работает, пока доступны любой из HTML5, JS или CSS.

<img draggable="false" onmousedown="return false" style="user-drag: none" />

Если вы уверены, что у пользователя будет JS, вам нужно использовать только атрибут JS,и т. д. Для большей гибкости посмотрите на ondragstart, onselectstart и некоторые CSS для WebKit.

Answer 7

Вы можете назначить альтернативное изображение-призрак, если вам действительно нужно использовать события перетаскивания и вы не можете установить draggable = false. Так что просто присвойте пустой png вот так:

    $('#img').bind({
        dragstart: function(e) {
            var dragIcon = document.createElement('img');
            dragIcon.src = 'blank.png';
            dragIcon.width = 100;
            e.dataTransfer.setDragImage(dragIcon, -10, -10);
        }
    });

Answer 8

Поместите изображение в качестве фона пустого элемента или под прозрачным элементом.Когда пользователь нажимает на изображение, чтобы перетащить, он нажимает на div.

См. http://www.flickr.com/photos/thefella/5878724253/?f=hp

<div id="photo-drag-proxy"></div>

Answer 9

Для Firefox вам нужно пойти немного глубже с этим:

var imgs = document.getElementsByTagName('img');

    // loop through fetched images
    for (i = 0; i < imgs.length; i++) {
        // and define onmousedown event handler
        imgs[i].onmousedown = disableDragging;
    }

function disableDragging(e) {
        e.preventDefault();
    }

Наслаждайтесь.

Answer 10

Здесь гораздо более простое решение, чем добавление пустых слушателей событий.Просто установите pointer-events: none для вашего изображения.Если вам все еще нужно, чтобы он был кликабельным, добавьте вокруг него контейнер, который вызывает событие.