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

Question

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

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

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

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

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

253

javascript html css html5 css3

Источник

user885355 16 сен '11 в 00:46

24 ответа

Другие вопросы по тегам javascript html css html5 css3

user106224 16 сен '11 в 00:52 2011-09-16 00:52 · Answer 1 · 2011-09-16 00:52

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

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

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

319

Источник

user106224 16 сен '11 в 00:52

user5330502 13 сен '15 в 09:52 2015-09-13 09:52 · Answer 2 · 2015-09-13 09:52

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

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

151

Источник

user5330502 13 сен '15 в 09:52

user7419092 16 фев '18 в 14:18 2018-02-16 14:18 · Answer 3 · 2018-02-16 14:18

Попытайся:

img{pointer-events: none;}

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

*{pointer-events: none;}

61

Источник

user7419092 16 фев '18 в 14:18

user3672465 02 фев '15 в 22:13 2015-02-02 22:13 · Answer 4 · 2015-02-02 22:13

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

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

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

user4813172 21 апр '15 в 04:50 2015-04-21 04:50 · Answer 5 · 2015-04-21 04:50

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

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

25

Источник

user4813172 21 апр '15 в 04:50

user8725395 17 дек '20 в 02:10 2020-12-17 02:10 · Answer 6 · 2020-12-17 02:10

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

      <img draggable="false" src="img/magician.jpg" alt="" />

20

Источник

user8725395 17 дек '20 в 02:10

user4907950 12 мар '20 в 23:04 2020-03-12 23:04 · Answer 7 · 2020-03-12 23:04

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

-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)

user1485984 24 мар '20 в 19:30 2020-03-24 19:30 · Answer 8 · 2020-03-24 19:30

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

11

Источник

user1485984 24 мар '20 в 19:30

user34397 16 сен '11 в 00:51 2011-09-16 00:51 · Answer 9 · 2011-09-16 00:51

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

10

Источник

user34397 16 сен '11 в 00:51

user12846136 18 сен '22 в 23:05 2022-09-18 23:05 · Answer 10 · 2022-09-18 23:05

HTML

      <img draggable="false" src="img/example.jpg">

JavaScript

      document.querySelector('img').addEventListener('dragstart', (event) => {
  event.preventDefault();
});

CSS

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

В настоящее время нет без префиксаuser-dragили другая версия свойства, реализованная в браузерах или в соответствии со стандартами, поскольку предпочтительным решением является перетаскиваемый атрибут/свойство HTML.

Это свойство, специфичное для Webkit. Вот что говорит об этом документация WebKit :

Заголовок

WebKit обеспечивает автоматическую поддержку, позволяя пользователям перетаскивать общие элементы, такие как изображения, ссылки и выделенный текст. Вы можете расширить эту поддержку, включив определенные элементы на HTML-страницу. Например, вы можете пометить определенный тег div или span как перетаскиваемый.

Чтобы пометить произвольный элемент как перетаскиваемый, добавьте атрибут в определение стиля элемента. Потому что-webkit-user-dragявляется атрибутом каскадной таблицы стилей (CSS), его можно включить как часть определения стиля или как встроенный атрибут стиля в теге элемента. Значения этого атрибута перечислены в таблице 4-1.

Значения атрибута -webkit-user-drag:

none: запретить перетаскивание этого элемента.

element: Разрешить перетаскивание этого элемента.

auto: использовать логику по умолчанию для определения необходимости перетаскивания элемента. (Изображения, ссылки и выделенный текст — единственные элементы, которые можно перетаскивать.) Это значение по умолчанию.

Он поддерживается всеми браузерами, использующими механизм рендеринга WebKit, поэтому Chrome, более новые версии Opera, Safari и т. д. Поддержка в мобильных браузерах, использующих WebKit, может различаться в зависимости от мобильной ОС.

user1550534 26 окт '13 в 00:04 2013-10-26 00:04 · Answer 11 · 2013-10-26 00:04

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

user602554 16 сен '11 в 00:50 2011-09-16 00:50 · Answer 12 · 2011-09-16 00:50

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

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

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

4

Источник

user602554 16 сен '11 в 00:50

user2260920 02 апр '23 в 11:59 2023-04-02 11:59 · Answer 13 · 2023-04-02 11:59

Вы можете обернуть img внутри другого div и применитьpointer-events:none;к этому div. Так что img не получится перетащить. Но это следует использовать только в том случае, если вы не собираетесь добавлять какое-либо другое поведение к целевому изображению.

3

Источник

user2260920 02 апр '23 в 11:59

user454088 01 ноя '13 в 15:16 2013-11-01 15:16 · Answer 14 · 2013-11-01 15:16

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

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

3

Источник

user454088 01 ноя '13 в 15:16

user270968 28 дек '17 в 15:57 2017-12-28 15:57 · Answer 15 · 2017-12-28 15:57

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

1

Источник

user270968 28 дек '17 в 15:57

user4646232 14 окт '20 в 14:08 2020-10-14 14:08 · Answer 16 · 2020-10-14 14:08

В React все, что вам нужно, это:

  <img
    src={}
    onMouseDown={(e) => {
      e.preventDefault();
      // other code
    }}
  />

1

Источник

user4646232 14 окт '20 в 14:08

user6225838 16 дек '21 в 20:39 2021-12-16 20:39 · Answer 17 · 2021-12-16 20:39

Если Firefox не оценивает ваш атрибут draggable (если установлено значение false) или ни одно из ваших правил CSS перетаскивания пользователем в вашей ссылке/якоре или элементе изображения:

И вы хотите сохранить события-указатели такими, какие они есть, вы можете использовать большие пушки для этого призрачного « полупрозрачного изображения , сгенерированного из цели перетаскивания (элемент, на который запускается событие dragstart)», как описано в MDN setDragImage . Просто используйте:

      if (/(firefox)/i.test(navigator.userAgent)) {
  document.querySelector('.my-non-draggable').addEventListener('dragstart',
    e => e.preventDefault()
  );
  // or jQuery: $('.my-non-draggable').on('dragstart', e => e.preventDefault());
}

user2668852 17 сен '16 в 19:11 2016-09-17 19:11 · Answer 18 · 2016-09-17 19:11

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

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

1

Источник

user2668852 17 сен '16 в 19:11

user13391106 27 окт '22 в 18:46 2022-10-27 18:46 · Answer 19 · 2022-10-27 18:46

      document.querySelectorAll("*").forEach((elem) => {
    elem.setAttribute('draggable', false)
    elem.addEventListener('dragstart', (event) => {
        event.preventDefault()
    })
})

Это отключает перетаскивание всех элементов.

1

Источник

user13391106 27 окт '22 в 18:46

user6584140 09 дек '16 в 16:34 2016-12-09 16:34 · Answer 20 · 2016-12-09 16:34

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

setDragImage

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

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

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

user9851199 24 июл '22 в 07:01 2022-07-24 07:01 · Answer 21 · 2022-07-24 07:01

//отключаем перетаскивание изображения

      $(document).on("dragstart", function (e) {
  e.preventDefault();
});

Для этого требуется jQuery. Это предотвратит перетаскивание любого текста или изображения. Замените документ любым элементом, который вы хотите предотвратить от перетаскивания.

0

Источник

user9851199 24 июл '22 в 07:01

user13431176 31 авг '20 в 10:15 2020-08-31 10:15 · Answer 22 · 2020-08-31 10:15

Вы можете использовать "Пустой элемент Img".
Пустой элемент Img - document.createElement("img")

[HTML Code]
<div id="hello" draggable="true">Drag!!!</div>

[JavaScript Code]
var block = document.querySelector('#hello');
block.addEventListener('dragstart', function(e){
    var img = document.createElement("img");
    e.dataTransfer.setDragImage(img, 0, 0);
})

0

Источник

user13431176 31 авг '20 в 10:15

user3536908 07 июн '14 в 00:00 2014-06-07 00:00 · Answer 23 · 2014-06-07 00:00

Протестировано на 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;

user9095934 07 апр '20 в 19:06 2020-04-07 19:06 · Answer 24 · 2020-04-07 19:06

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

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

-2

Источник

user9095934 07 апр '20 в 19:06