Как запретить перетаскивать картинку css

Запрет перетаскивания img и url браузером

Во многих браузерах (например в хроме и ие) возможно «перетащить» картинку или ссылку, зажав над ней левую кнопку мыши, допустим в адресную строку и т.д.. Требуется с помощью js запретить. Каким образом это возможно реализовать? (написан маленький скрипт, позволяющий зажав кнопку над элементов свободно перетаскивать его. Проблема в том, что если элемент — картинка, вместо перетаскивания, браузер (хром, ие и т.д. кроме опера) захватывает его по своему, для переноса в адресную строку, на панель и прочее. Надо как-то запретить браузеру его действие по умолчанию) p.s.

-webkit-user-select: none; -moz-user-select: none;

проблемы не решают

Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
задан 30 окт 2011 в 18:42
253 4 4 золотых знака 6 6 серебряных знаков 18 18 бронзовых знаков

как решить думать лень , но интересно, зачем вобще такая бредовая задача понадобилась? заказчики жестят или реально это обосновано требованиями?

30 окт 2011 в 19:38

Ну почему же бредовая ? Представим что у нас есть некоторая «курусель» с изображениями, и тут нам захотелось что бы мышкой можно было прокручивать изображения (перетаскивать) да и любую drag&drop задачу портит сей факт.

Использование CSS разметки для многих колонок

CSS разметка для многих колонок расширяет способ блочной разметки, чтобы позволить лёгкое описание нескольких колонок текста. Людям сложно читать текст, если строки слишком длинные; это занимает слишком много времени для глаз, чтобы перемещать взгляд с конца одной на начало следующей строки, и они забывают на какой строке находились. Поэтому, чтобы использовать большие дисплеи по максимуму, авторам следует ограничить ширину колонок текст расположенных бок о бок, как в газетах.

К несчастью, это невозможно сделать с CSS и HTML без принудительного разбиения колонки в фиксированных позициях, или строго ограничить допустимую разметку в тексте, или использовать экстраординарный скрипт. Это ограничение снимается с помощью добавления новых CSS-свойств, чтобы расширить традиционный блочный способ разметки.

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

Количество колонок и ширина

Два свойства CSS контролируют появятся ли колонки и как много их будет: column-count and column-width (en-US).

Свойство column-count устанавливает количество колонок определённым числом. Пример,

div style="column-count:2;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div>

отобразит содержимое в двух колонках (если вы используете многоколоночно совместимый браузер):

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Свойство column-width устанавливает минимальную желаемую ширину колонки. Если column-count также не установлено, тогда браузер автоматически сделает столько колонок, сколько нужно, чтобы заполнить доступную ширину.

div style="column-width:20em;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div>

Подробные детали описаны в CSS3 спецификации.

В многоколончатом блоке, содержимое автоматически перетекает из одной колонки в следующую, как это необходимо. Вся HTML, CSS и DOM функциональность поддерживается внутри колонок, как например редактирование и печать.

К краткая запись columns

В большинстве случаев веб-разработчики используют одно из двух свойств CSS: column-count или column-width (en-US). Так как значения для этих свойств не пересекаются, то часто удобно использовать короткую запись columns (en-US). Пример:

CSS объявление column-width:12em может быть заменено:

div style="columns:12em"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div>

CSS объявление column-count:4 может быть заменено:

div style="columns:4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div>

Два CSS объявления column-width:8em и column-count:12 могут быть заменены:

div style="columns:12 8em"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div>

Выравнивание высоты

CSS3-спецификация колонок требует, чтобы высота колонки была выровнена, т.е. браузер автоматически устанавливает максимальную высоту колонки, для того, чтобы высота содержимого в каждой из них была приблизительно одинаковая. Firefox так и делает.

Однако, в некоторых ситуациях полезно установить максимальную высоту колонок явно, тогда расположение содержимого, начиная с первой колонки и последующих созданных, как необходимо, возможно, перекроют правую границу. Поэтому, если высота ограничена, с помощью CSS height или max-height свойств на многоколончатом блоке, каждой колонке разрешено расти до этой высоты, но не более, пока не добавится новая колонка. Этот режим также более эффективен для разметки.

Промежутки между колонками

Существует промежуток между колонками. По умолчанию рекомендовано значение 1em . Это значение можно изменить, применяя свойство column-gap на многоколончатом блоке:

div style="column-width:20em; column-gap:2em;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div>

Постепенное ухудшение

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

Обратите внимание, что не все браузеры поддерживают эти свойства без префикса. Чтобы использовать эти свойства в большинстве современных браузеров, каждое свойство должно быть написано трижды: одно с префиксом -moz , одно с префиксом -webkit и третье без префикса.

Заключение

CSS3 колонки — примитивная разметка, которая поможет Веб-разработчикам лучше воспользоваться реальным участком экрана. Разработчики с воображением могут найти много способов для их использования, особенно с автоматическим выравниванием высоты.

Смотрите также

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Как запретить перетаскивание картинки с зажатой кнопкой?

Запретить перетаскивании картинок с использование CSS

Можете применить этот CSS ко всем картинкам на сайте через атрибут img или повесить стили на ваш класс

Запретить перетаскивании картинок с использование атрибута HTML

Необходимо добавить к вашей картинке draggable=”false”

Как запретить перетаскивать картинку css

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

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

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

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

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

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

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

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

Читать:

Easy battery calibration как пользоваться

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Запрет перетаскивания img и url браузером

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

Отключить перетаскивание изображения с HTML-страницы

Мне нужно поместить изображение на мою страницу. Я хочу отключить перетаскивание этого изображения. Я пытаюсь много чего, но не помогаю. Кто-нибудь может мне помочь ?

Я не хочу держать это изображение в качестве фонового изображения, потому что я изменяю размер изображения.

21 ответов

Вам может понравиться это.

Кажется, вы используете jQuery.

CSS только решение: используйте pointer-events: none

просто добавьте draggable= «false»в тег изображения:

IE8 и под не поддерживают.

я использовал его на своем веб-сайте в http://www.namdevmatrimony.in/ Это работает как магия. ��

я попробовал сам и обнаружил, что это работает.

Я уверен, что это отключает перетаскивание всех изображений. Не уверен, что это повлияет на что-то еще.

самое простое кросс-браузерное решение —

посмотреть этот ответ; в Chrome и Safari вы можете использовать следующий стиль, чтобы отключить перетаскивание по умолчанию:

можно попробовать пользователей-выберите для Firefox и IE(10+):

вы можете добавить к каждому изображению вы не хотите перетаскивать, (внутри img tag):

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

поскольку мои изображения были созданы с помощью ajax и поэтому недоступны в windows.нагрузка.

таким образом, я могу контролировать, какой раздел блокирует поведение, он использует только одну привязку событий, и он работает для будущих изображений, созданных ajax, без необходимости что-либо делать.

С jQuery new on обязательные:

$(‘#page’).on(‘dragstart’, ‘img’, function(event) ); (спасибо @ialphan)

непосредственно используйте это: ondragstart=»return false;» в теге изображения.

если у вас есть несколько изображений, завернул на tag:

работает во всех основных браузерах.

отличное решение, была одна небольшая проблема с конфликтами, Если у кого-то еще есть конфликт из другой библиотеки js, просто не включайте такой конфликт.

надеюсь, это поможет кому-то.

Ну, я не знаю, помогли ли ответы здесь всем или нет, но вот простой встроенный CSS-трюк, который определенно поможет вам отключить перетаскивание и выбор текстов на HTML-странице.

на добавить тег ondragstart=»return false» . Это отключит перетаскивание изображений. Но если вы также хотите отключить выделение текста, добавьте onselectstart=»return false» .

код будет выглядеть так:

Ну, это возможно, и другие ответы, опубликованные, совершенно действительны, но вы можете принять подход грубой силы и предотвратить поведение по умолчанию mousedown картинки. Который, чтобы начать перетаскивание изображения.

что-то вроде этого:

Вы можете считать мое решение самое лучшее. Большинство ответов несовместимы со старыми браузерами, такими как IE8, так как Эл.метод preventDefault() не будет поддерживаться, а также ondragstart событие. Для этого кросс-браузер совместим вы должны заблокировать mousemove событие для этого изображения. См. пример ниже:

jQuery

без jQuery

проверен и работал даже на ИЕ8

установите следующие свойства CSS для изображения:

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

Это должно работать для большинства браузеров, даже более старых.

Я сделал свойства css, показанные здесь, а также монитор ondragstart со следующим javascript:

Как запретить выделение/копирование изображения | HTML

Есть скрипты, которые блокируют правую кнопку мышки, в результате чего нельзя вызвать контекстное меню, если нажать на фото. На CSS можно сделать более элегантное решение: в всплывающем контекстном меню не будет пункта «Сохранить изображение как. «.

Юрий Гагарин

или для всех изображений сайта

ВНИМАНИЕ: картинка легко скачивается из исходного кода страницы. Серьёзно предполагать, что подобными методами (JavaScript или CSS) можно удержать плагиаторов, нельзя.

Как запретить выделение изображения

Юрий Гагарин

Я обычно объединяю оба способа для создания, например, такой фотогалереи

18 комментариев:

Иван На вордпрессе тоже есть даже плагин, который выключает правую кнопку мышки, не дает простым способом скопировать фото и текст. Но к сожалению это только простой способ. А скопировать можно другими способами. Это не проблема кто хочет скопировать. NMitra Совершенно верно. Отключение JavaScript даёт доступ к коду, а дальше всё очень просто. Программам даже это делать не нужно, мало какие скрипты видят ту же картинку, что и браузеры. В них просто не заложена поддержка всех свойств CSS, JavaScript.

Эти свойства, конечно, были придуманы для другого. Я сейчас плотно подсела на сочетание pointer-events с user-select и focus. Точно также, как когда-то на :checked. Огорчает только Опера Мини. Rinat Urmancheev К сожалению, способы не подходят для многих IE (goo.gl/SgHlwy, goo.gl/lyBddg). Мне кажется, об этом стоит упомянуть в сообщении �� NMitra Ринат, дело в том, что здесь я не описываю работу конкретного свойства, как, например, тут http://css-tricks.com/almanac/properties/p/pointer-events/ , а даю способы решения конкретной задачи. Было бы, например, странно, если бы я в статье про «таб-вкладки» http://shpargalkablog.ru/2012/03/css-tabs.html давала бы описание каждого отдельного свойства. То же самое и тут.

Да и не справочник у меня, а блог. Справочник в Рунете уже есть и довольно не плохой и удобный в использовании http://htmlbook.ru/ . Англоязычный мне нравится у Мозилы https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events , во-первых, из первых рук, во-вторых, есть ссылка на w3.org (новые-старые версии).

А поддержку браузерами можно посмотреть и тут http://caniuse.com/pointer-events

Тоже обращение по Утриш подписала, а потом прочитала, что вопрос уже решён в пользу заповедника. Ура. Nonna Здравствуйте. Подскажите, как использовать pointer-events: none для всех изображений, кроме нескольких картинок (значков) социальных сетей, которые являются ссылками? Пробовала к
pointer-events: none;

дописывать
pointer-events: auto
не сработало. В отдельном гаджете — тоже ничего. Может есть какой-то способ сделать исключения для работы мышки только на некоторых картинках? NMitra Здравствуйте,

1) использование класса (изображениям, к которым не нужен pointer-events: none; задать класс) http://jsfiddle.net/NMitra/k954gn16/
img
img.non

2) исключение для картинок-ссылок http://jsfiddle.net/NMitra/k954gn16/1/
img
a img Nonna Здравствуйте, спасибо за скорый ответ. Пытаюсь разобраться (step by step, а уж Вы исправьте что не так) — добавляю гаджет Настроить HTML/JavaScript, вписываю style img pointer-events: none; style так я получаю неработающую левую кнопку+невозможность выделения изображения+нет пункта «сохранить изображение как..» Тут разобралась. Все ОК. Это должно быть применимо ко ВСЕМ изображениям и поэтому сразу перехожу к 2) Вашего ответа — исключения для картинок ссылок. Тут также есть гаджет Настроить HTML/JavaScript в котором есть (одно из нескольких) a href=https www.facebook.com/N» target blank» title Facebook img src https mg-fotki.yandex.ru/get/15519/235879411.0/0_101ae5_4b1c1ddd_XXS.gif style height: 30px; width: 30px; a. И вот тут я застреваю — если у меня в отдельном гаджете уже стоит для всех, то как мне выделить a img? А третий гаджет — переводчик, там есть картинки и для них нужны работающие и правая и левая кнопки мыши.Там есть a class google_translate href target blank» rel nofollow» title English» onclick window.open(‘http translate.google.com/translate?u encodeURIComponent(location.href) langpair auto%7Cen&hl=en return false img alt English» border 0″ align absbottom» title «English height 24src http4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United Kingdom Great+Britain).png style cursor pointer;margin-right 8px width 28 a. Надеюсь, что понятно объяснила свою проблему)) Буду благодарна за пошаговую помощь, так как я еще новичок )) Nonna И еще кое-что. Если с запретом сохранения картинок на компе более-менее понятно, то что делать с мобильниками? «Показывать на мобильных устройствах мобильную версию текущего шаблона. Да.Показывать мобильные шаблоны на мобильных устройствах \Нет.Показывать шаблоны для компьютеров на мобильных устройствах.» И так и так при клике на фото они открываются в отдельном окне с показательным адресом. И сразу предлагается сохранить фото. Плюс у меня свой домен и хотелось бы не отсвечивать движок на адресах картинок. Есть такая возможность? NMitra Здравствуйте. Так.
1) у вас все картинки идут с Г+, поэтому их все там можно вытянуть,
2) изображения индексируют поисковые системы (в полный рост и с хорошим качеством) и человек в большинстве случаев рыщет именно по картинкам Яндекса и Гугл.
3) какой бы вы скрипт не поставили, при желании скопировать адрес изображения для меня не составит большого труда.
4) принадлежность к платформе выдаёт построение кода, а не столько изображения, их может бросать в Г+ и сайт на хостинге

В гаджете не должно быть проблем, так как второй строкой
a img
мы убираем действие pointer-events для картинок, у которых родитель ссылка Nonna Здравствуйте. С Вашими ответами разобралась, все понятно, спасибо. С гаджетом не получается все равно: если пишу первую строку, то отключается все, а если пишу 2 строки (вот так) style img a img style, то все вновь включается.То есть исключение для ссылочных картинок не работает. NMitra Только для Blogger

Похожие публикации:

Как закомментировать код в css
Как записать загрузчик в arduino nano через usbasp
Как создать сайт на css
Как сохранить пропорции картинки css

Запрет перетаскивания img и url браузером

Использование CSS разметки для многих колонок

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

Количество колонок и ширина

К краткая запись columns

Выравнивание высоты

Промежутки между колонками

Постепенное ухудшение

Заключение

Смотрите также

Found a content problem with this page?

Как запретить перетаскивание картинки с зажатой кнопкой?

Запретить перетаскивании картинок с использование CSS

Запретить перетаскивании картинок с использование атрибута HTML

Как запретить перетаскивать картинку css

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

Запрет перетаскивания img и url браузером

Отключить перетаскивание изображения с HTML-страницы

21 ответов

Как запретить выделение/копирование изображения | HTML

Как запретить выделение изображения

18 комментариев:

Похожие записи