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

Ответ 1

Вы можете установить атрибут draggable в false как в разметке, так и в коде JavaScript. См. эту демонстрацию.

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

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

Ответ 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;
}

Ответ 3

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

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

Ответ 4

Обработать событие dragstart и return false.

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

Enjoy.

Ответ 8

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

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

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

Ответ 9

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

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

EDIT. Это работает только в 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;

Ответ 10

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

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

Ответ 11

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

setDragImage

использовать

OnClick = туРипсЫоп();

-

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

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