CSS / JS для запобігання перетягуванню зображення привидів?

Чи є спосіб запобігти користувачеві бачити привид зображення, яке він намагається перетягнути (стосується не безпеки зображень, а досвіду).

Я спробував це, що вирішує проблему із синім виділенням тексту та зображень, але не зображенням привидів:

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

(Я також спробував вкласти зображення всередині 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 для відключення зображень у веб-браузерах.

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

Це дозволить вимкнути перетягування зображення у всіх веб-переглядачах , а також зберегти інші події, такі як натискання та наведення курсору. Працює до тих пір, поки доступні будь-які HTML5, JS або CSS.

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

Якщо ви впевнені, що у користувача буде JS, вам потрібно використовувати лише атрибут JS тощо.

Обробіть 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);
        }
    });

Розмістіть зображення як фон порожнього діва або під прозорим елементом. Коли користувач натискає на зображення, щоб перетягнути, він клацає на діві.

Див. 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');
});

EDIT : Це працює лише на IE та на Firefox, як не дивно. Я також додав draggable = falseна кожне зображення. Досі привид з Chrome і Safari.

EDIT 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-елемент, якщо неможливо перетягнути елемент - це не проблема.

Все-всьому, без вибору та перетягування, з усіма префіксами браузера:

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