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

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

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

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

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

Вы можете установить draggableатрибут falseв разметку или код JavaScript.

// As a jQuery method: $('#myImage').attr('draggable', false);
document.getElementById('myImage').setAttribute('draggable', false);

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

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

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

Попытайся:

img {
  pointer-events: none;
}

и стараться избегать

* {
  pointer-events: none;
}

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

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

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

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

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

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

Вы можете назначить альтернативное изображение-призрак, если вам действительно нужно использовать события перетаскивания и вы не можете установить 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);
        }
    });

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

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

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

Для 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();
    }

Наслаждаться.

Я обнаружил, что для IE вы должны добавить атрибут draggable = "false" к изображениям и привязкам, чтобы предотвратить перетаскивание. Параметры CSS работают для всех других браузеров. Я сделал это в JQuery:

$("a").attr('draggable', false); 
$("img").attr('draggable', false);

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

<img src="myimage.jpg" ondragstart="return false;" />

Протестировано на Firefox: удаление и возврат изображения работает! И это прозрачно при исполнении тоже. Например,

$('.imageContainerClass').mousedown(function() {
    var id = $(this).attr('id');
    $('#'+id).remove();
    $('#'+id).append('Image tag code');
});

РЕДАКТИРОВАТЬ : Это работает только на IE и Firefox, как ни странно. Я также добавил draggable = falseна каждом изображении. Все еще призрак с Chrome и Safari.

РЕДАКТИРОВАТЬ 2 : решение для фонового изображения является действительно лучшим. Единственная тонкость в том, что background-sizeсвойство должно быть переопределено при каждом изменении фонового изображения! Или так, как это выглядело с моей стороны. Более того, у меня была проблема с обычными imgтегами под IE, когда IE не удалось изменить размер изображений. Теперь изображения имеют правильные размеры. Просто:

$(id).css( 'background-image', url('blah.png') );
$(id).css( 'background-size', '40px');

Также, возможно, рассмотрим те, которые:

background-Repeat:no-repeat;
background-Position: center center;

Вы можете установить изображение, которое отображается при перетаскивании элемента. Протестировано с Chrome.

setDragImage

использование

onclick = myFunction();
myFunction(e) {
    e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}

В качестве альтернативы, как уже упоминалось в ответах, вы можете установить draggable="false" элемент HTML, если не существует возможности перетаскивания элемента вообще.

Be-all-end-all, без выбора или перетаскивания, со всеми префиксами браузера:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
-ms-user-drag: none;
user-drag: none;

Вы также можете установить draggableатрибут на false. Вы можете сделать это с помощью встроенного HTML:, draggable="false"с помощью Javascript: elm.draggable = falseили с помощью jQuery:elm.attr('draggable', false) .

Вы также можете обращаться с onmousedownфункцией к return false. Вы можете сделать это с помощью встроенного HTML:, onmousedown="return false"с помощью Javascript: elm.onmousedown=()=>return false;или с помощью jQuery:elm.mousedown(()=>return false)

Эта работа для меня, я использую некоторые скрипты лайтбокса

.nodragglement {
    transform: translate(0px, 0px)!important;
}