Перетаскивание изображения – использование Drag and Drop в html 5
Всем привет!
Думал я, что уже все знаю про html 5, но я круто ошибался.
Нашел в интернете несколько статей, как сделать перетаскивание изображения, используя html 5.
Не знаю, получится ли у меня доходчиво все рассказать. Искал в интернете материал, чтобы разобраться, но, увы – хорошей подачи не нашел. Поэтому решили сам написать, а уж как это у меня получилось, пишите в комментариях.
Итак, с помощью технологии drag and drop (drag’n’drop) вы можете сделать все элементы на вашем сайте перетаскиваемыми (картинки, текст, блоки и т.д.).
Раньше такой эффект можно было реализовать с помощью JavaScript функций или подключением jQuery. Теперь все изменилось, так как перетаскивание элементов на веб-странице можно сделать на HTML5 намного быстрее и проще.
Итак, ознакомьтесь со специальными событиями для перетаскивания, которые были добавлены в HTML5:
| Событие | Описание |
| dragstart | Выполнится в начале операции перетаскивания |
| ondrag | Выполнится во время перетаскивания элемента |
| ondragenter | Выполнится когда перетаскиваемый элемент будет наведен на элемент, который может его принять |
| ondragleave | Выполнится когда перетаскиваемый элемент будет выведен за пределы границ элемента, который может его принять |
| ondragover | Выполнится когда перетаскиваемый элемент будет перемещаться в пределах границ элемента, который может его принять |
| ondrop | Выполнится когда перетаскиваемый элемент будет перемещен в принимающий его элемент |
| ondropend | Выполнится в конце операции перетаскивания |
Теперь попробуем все события использовать на практике.
1 этап – поле для перетаскивания
Для начала создадим блок, куда будем перетаскивать элементы:
Как видите, к блоку я прописал «id» с именем «box». Это не принципиально, но чтобы у вас не было лишних вопросов, делайте все также.
К этому же блоку нужно прописать события:
Какие мы использовали события?
— ondragenter – выполнится, когда перетаскиваемый элемент будет наведен на элемент, который может его принять;
— ondrop – выполнится, когда перетаскиваемый элемент будет перемещен в принимающий его элемент;
— ondragover – выполнится, когда перетаскиваемый элемент будет перемещаться в пределах границ элемента, который может его принять.
Вот полный пример:
Чтобы поле для перетаскивания было видно нашему глазу, пропишем в CSS парочку стилей:
2 этап – элементы для перетаскивания
Элементами для перетаскивания у меня будут изображения:
Обратите внимание, что для каждой картинки я прописал уникальное id, так должны сделать и вы.
Пропишите для каждой картинки событие:
Какие мы использовали события?
— draggable – это атрибут, который устанавливает возможность перетаскивать элемент.
«draggable» имеет два значения:
true — данный элемент можно перетаскивать
false — данный элемент запрещено перетаскивать
— ondragstart – выполняется, когда объект перетаскивания начался (пользователь нажал кнопку мыши и начал перетаскивать объект).
3 этап – обработка элемента во время перетаскивания
Вставьте вот такой JavaScript код:
Все, готово! Смотрите на результат (перетащите картинку в серый прямоугольник):
Все хорошо, но как вернуть картинки (элемент) назад?
Чтобы была возможность возвращать картинки (элемент) назад на исходную, я обернул «div» все перетаскиваемые картинки с такими же событиями и названиями функций, как и для «поля для перетаскивания»:
Для красоты можно прописать в CSS стиль:
А вам же хочется посмотреть на живой результат? Попробуйте по перетаскивать картинки с одного поля в другое и назад на исходную.
Можно немного пофантазировать и сделать еще вот так:
Вам, наверное, не терпится увидеть результат:
Это все, что я хотел рассказать о перетаскивании элементов с помощью HTML5.
Попробуйте поискать дополнительно информацию в интернете.
Всем удачи!
Как переместить изображение вверх в html/css
Я совсем новичок в HTML, и я хотел, чтобы на моей странице было изображение, но когда я использую <hr> чтобы отделить его от других вещей, они пересекаются. Поэтому я хочу немного поднять свой имидж. Вот код, который я использовал:
Я не пользуюсь <head> ни <style> теги.
Я пытался использовать position: относительный;top:-10px;, но я не могу понять, как его использовать, или у него есть проблемы с «float». Кто-нибудь, пожалуйста, помогите мне, что делать?
Спасибо заранее и спасибо всем, кто пытался решить это до сих пор.
Html как изменить положение картинки
There are several ways to do this, and if it needs to work in all browsers (IE7+ and the rest) you need to do different things to make it work in some of the cases.
Use absolute position. This only works if you know the size of the image.
Here you set it to position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image> .
See example here: http://jsfiddle.net/JPch8/
Use margin: 0 auto;text-align: center; and line-height/font-size .
This is a bit more tricky, since line-height doesn’t work as it should in IE for inline-block elements like images. That’s where the font-size comes in.
Basically, you set the line-height of the image container to the same as the container’s height. This will vertically align inline elements, but in IE you need to set the font-size instead to make it work.
See example here: http://jsfiddle.net/JPch8/2/
In modern browsers that support display: flex you can do it by simply setting the container div to display: flex; align-items: center; justify-content: center;
See example here: https://jsfiddle.net/ptz9k3th/
answered Feb 3, 2011 at 15:37
Martin Jespersen Martin Jespersen
25.5k 8 gold badges 55 silver badges 66 bronze badges
put the image in a <div> with text-align:center; without specifying the size of the box
alternatively you can specify width and the height of the <div> box in order to center the image (actually the div box).
answered Jul 7, 2015 at 2:56
Kagan Agun Kagan Agun
459 1 gold badge 6 silver badges 7 bronze badges
answered Dec 14, 2019 at 10:28
« float:left; position:relative » probably doesn’t work as expected. Floated elements are considered absolute.
To get the image centered vertically you need a height on the div, and you need height on it’s parents. (Centering vertically is kind of a pain). My example below will work if those are your only elements but be aware that height: 100% on the containers will likely affect the rest of your layout.
answered Feb 3, 2011 at 15:43
19k 6 gold badges 49 silver badges 60 bronze badges
A suitable solution for modern browsers is flexbox. A flex container can be configured to align its items both horizontally and vertically.
answered May 29, 2019 at 14:56
7,957 5 gold badges 38 silver badges 43 bronze badges
I hope I understand what you are trying to achieve.
answered Feb 3, 2011 at 15:35
Or Weinberger Or Weinberger
7,242 20 gold badges 70 silver badges 114 bronze badges
How can i make the image start from the middle of this box? (middle both vertical and horizontal)
asked Feb 3, 2011 at 15:33
There are several ways to do this, and if it needs to work in all browsers (IE7+ and the rest) you need to do different things to make it work in some of the cases.
Use absolute position. This only works if you know the size of the image.
Here you set it to position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image> .
See example here: http://jsfiddle.net/JPch8/
Use margin: 0 auto;text-align: center; and line-height/font-size .
This is a bit more tricky, since line-height doesn’t work as it should in IE for inline-block elements like images. That’s where the font-size comes in.
Basically, you set the line-height of the image container to the same as the container’s height. This will vertically align inline elements, but in IE you need to set the font-size instead to make it work.
See example here: http://jsfiddle.net/JPch8/2/
In modern browsers that support display: flex you can do it by simply setting the container div to display: flex; align-items: center; justify-content: center;
See example here: https://jsfiddle.net/ptz9k3th/
answered Feb 3, 2011 at 15:37
Martin Jespersen Martin Jespersen
25.5k 8 gold badges 55 silver badges 66 bronze badges
put the image in a <div> with text-align:center; without specifying the size of the box
alternatively you can specify width and the height of the <div> box in order to center the image (actually the div box).
answered Jul 7, 2015 at 2:56
Kagan Agun Kagan Agun
459 1 gold badge 6 silver badges 7 bronze badges
answered Dec 14, 2019 at 10:28
« float:left; position:relative » probably doesn’t work as expected. Floated elements are considered absolute.
To get the image centered vertically you need a height on the div, and you need height on it’s parents. (Centering vertically is kind of a pain). My example below will work if those are your only elements but be aware that height: 100% on the containers will likely affect the rest of your layout.
answered Feb 3, 2011 at 15:43
19k 6 gold badges 49 silver badges 60 bronze badges
A suitable solution for modern browsers is flexbox. A flex container can be configured to align its items both horizontally and vertically.
answered May 29, 2019 at 14:56
7,957 5 gold badges 38 silver badges 43 bronze badges
I hope I understand what you are trying to achieve.
answered Feb 3, 2011 at 15:35
Or Weinberger Or Weinberger
7,242 20 gold badges 70 silver badges 114 bronze badges
Передвигаем картинку. Двигаем рисунок.
На мой взгляд самый простой способ разместить картинку в нужном месте странице —
это использовать CSS.
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего
вида документа, написанного языком разметки. Преимущественно используется как
средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми
видами документов в формате XML, включая SVG и XUL.
Более подробно ознакомится с CSS можно здесь.
На это тему написано огромное количество книг, изучая HTML нельзя обойти CSS это не
правильно. Так что начинается всё с HTML. :)Я начну рассказ то же с применения HTML. Как
известно в HTML есть теги, которые формируют вид страницы в браузере.
У каждой пары тегов есть свои атрибуты, а в свою очередь у каждого
атрибута есть свои аргументы, немного путано, но эта цепочка именно так и
работает. Весь текст находящийся между парой тегов исполняется и представляется
в браузере согласно языка HTML и стилем браузера по умолчанию.
Стиль браузера — стандартный стиль, используемый браузером по умолчанию для
представления элементов.
У всех тегов описанных в листинге №1 есть атрибут align он отвечает за
расположение текста или картинки в пространстве страницы ПО ГОРИЗОНТАЛИ. Раз
есть атрибут тега, значит должен быть и аргумент этого атрибута.
Выравнивание текста по центру. Текст помещается по центру горизонтали окна
браузера или контейнера, где расположен текстовый блок. Строки текста словно
нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный
способ выравнивания активно используется в заголовках и различных подписях,
вроде под рисуночных, он придает официальный и солидный вид оформлению текста. Во
всех других случаях выравнивание по центру применяется редко по той причине, что
читать большой объем такого текста неудобно.
Выравнивание по ширине, что означает одновременное выравнивание по левому и
правому краю. Чтобы произвести это действие браузер в этом случае добавляет
пробелы между словами.
Выравнивание текста по левому краю. В этом случае строки текста выравнивается по
левому краю, а правый край располагается «лесенкой». Такой способ выравнивания
является наиболее популярным на сайтах, поскольку позволяет пользователю легко
отыскивать взглядом новую строку и комфортно читать большой текст.
Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли
антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а
левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него
начинается чтение новых строк, такой текст читать труднее, чем, если бы он был
выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно
для коротких заголовков объемом не более трех строк. Мы не рассматриваем
специфичные сайты, где текст приходится читать справа налево, там возможно
подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие
сайты.
Это картинка в таблице с отступами справа и слева. Здесь используются атрибуты
hspace — это отступы по горизонтали и vspace — отступ по вертикали,
причем сразу с двух сторон 70->картинка<-70.
Теперь используем CSS. Поместим картинку для начала в контейнер или в блок — в этом
нам поможет тег див. Он собственно и является своего рода контейнером или ещё
называют блоком. Про блочную вёрстку слышали, вот это с его помощью делается.
Синий край это границы контейнера (div), пространство внутри, которое заштриховано,
есть то пространство, на которое надо отступить внутри контейнера от его границ
(стрелками указана величина в пикселах). Таким образом и происходит размещение
контента внутри блока.
Листинг № Array — Размещение картинки с помощью CSS. Файл стиля.
@charset «windows-1251»;
/* CSS Document */
.gif <
padding-top: 200px;
padding-left: 150px;
width: 350px;
padding-bottom: 47px;
>
Рассмотрим подробнее. Первые две строки для нас сейчас не важны их пропускаем.
Далее идёт точка — это обозначение класса в CSS. Примерно читается так: класс gif
имеет следующие атрибуты:
Так же есть атрибут padding-right: — это отступ справа. Ну теперь наверно стало картина
прояснятся как можно подвинуть картинку, т.е. меняя аргументы атрибутов, те самые
циферки что измеряются в пикселах, хотя кстати то же не обязательно в них. Помимо
того, что мы рассмотрели атрибуты которые применяются с тегом див, которые
отвечают за расположение объекта внутри контейнера. Существуют ещё атрибуты
которые в свою очередь двигают контейнер снаружи относительно страницы это
margin.
Листинг № Array — Это весь HTML-код используемый для установки картинки в нужном месте страницы.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Untitled Document</title>
<link href=»/hio.css» rel=»stylesheet» type=»text/css»>
</head>
<body>
<div src=»/images/Avatar1/Ava0002.gif» border=0></div>
</body>
</html>
Листинг № Array — Таблица CSS стилей для последнего примера. (Файл hio.css)
@charset «windows-1251»;
/* CSS Document */
.gif <
padding-top: 200px;
padding-left: 150px;
width: 350px;
padding-bottom: 47px;
margin-top: 50px;
margin-right: 250px;
margin-bottom: 101px;
margin-left: 312px;
>
SETTER © LPHP.RU
Администрация сайта
Array
Размеры и позиционирование изображений на веб-страницах
Вспомним, что для добавления файлов изображений на веб-страницу используется одиночный тег <img> с атрибутами:
<img scr=»адрес» alt=»описание» width=»ширина» height=»высота»>
Атрибуты ширины и высоты можно опустить, если размер задается с помощью одноименных свойств CSS.
Если картинка больше ширины блока, в котором размещается, она будет выходить за пределы этого блока.
Однако ширину можно выражать в процентах. При этом она вычисляется от размера родительского блока. В таком случае изображение будет расширяться и сжиматься, подстраиваясь под разные экраны. При расширении потери качества не произойдет, так как реальный размер картинки все-равно больше.
Значение auto для height заставляет высоту изображения масштабироваться пропорционально ширине.
То же самое через css-правило:
Или встроенный в элемент стиль:
Проблема возникает, когда картинка меньше ширины родительского блока на больших экранах, однако на малых – наоборот, не помещается в него. В таком случае если мы оставим размер изображения в пикселях, то все будет хорошо на условных мониторах, но плохо на условных смартфонах.
Если же выразим ширину в процентах, то решим проблему на мобильных устройствах. Однако на десктопах получим ухудшение качества изображения, так как оно растянется больше своего оригинального размера.
Наиболее простым способом решения проблемы является использование css-свойства max-width со значением в процентах и с одновременным указанием размера изображения в пикселях в атрибутах элемента img .
В этом случае max-width растягивает картинку на всю ширину внешнего блока при условии, что размер этого блока не превышает размера изображения. Когда это не так, срабатывают значения атрибутов длины и ширины тега.
Ранее (см. урок 3), когда речь шла о блочных и строчных элементах, то для выравнивая отдельно стоящего изображения по центру приводился пример помещения его в блок div или figure . Однако мы можем сделать само изображение блочным элементом с помощью объявления display: block . После этого центрировать его с помощью margin: auto .
Бывает, что маленькие картинки предпочитают обтекать текстом слева или справа. Для этого используют свойство float со значением left или right . В случае float: left элемент будет «уплывать» налево. Другие элементы будут оказываться справа от него.
Здесь может потребоваться решать две проблемы:
- Бывает необходимо, чтобы только конкретный абзац обтекал изображение.
- На узких экранах обтекание должно смениться на расположение картинки и текста друг под другом. Иначе получается слишком мало места для текста сбоку от изображения, и верстка выглядит плохо.
Первая проблема решается с помощью свойства clear . В примере на скрине выше допустим мы не хотим, чтобы второй абзац обтекал символ копилефта. Следовательно, очищать обтекание мы должны у него.
Объявление clear: left заставляет элемент перестать обтекать объекты, расположенные с левой стороны. Вариант clear: both – с обоих сторон. В нашем примере значение both дало бы тот же результат.
Чтобы убрать обтекание изображений на малых экранах, потребуется использовать @media-запрос, в котором значения свойств будут меняться. Однако если мы до этого оформляли элемент через атрибут style тега, то такой inline-стиль (строчный) имеет приоритет над внешней или внутренней таблицей стилей.
Поэтому в нашем случае понадобится использовать команду !impotant :
Когда на странице несколько изображений оформляются по-разному, то inline-стили могут выглядеть предпочтительными. Если же можно выделить несколько групп изображений, каждая из которых стилизуется по-своему, следует задуматься об использовании классов.
Свойство float применяется не только при позиционировании изображений, также любых блочных элементов, может служить основой создания отзывчивого дизайна.
От автора: одним из наиболее полезных инструментов в CSS, на мой взгляд, является позиционирование элементов документа. Под термином «позиционирование» понимается возможность расположить элемент (блок, картинку и др.) в абсолютно любом месте документа.
Полезность этого свойства увеличивается прямо пропорционально сложности макета сайта. В уроке мы детальнее рассмотрим это полезное свойство. Сама же тема урока взята из вопросов, поступивших в нашу службу поддержки в один и тот же день.
Для начала давайте рассмотрим классический пример, где нам потребуется использование позиционирования… к слову, пример этот как раз и взят из одного из упомянутых выше вопросов. Итак, на указанной части шаблона:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
мы имеем 2 логические части — шапка и блок меню. При этом оба блока содержат в себе части единой картинки — автомобиля «заезжающего» с шапки на меню. Теоретически здесь мы могли бы обойтись и без позиционирования. Для этого достаточно было бы вырезать картинку шапки и фон меню, при этом на каждой из картинок присутствовала бы своя часть автомобиля:
Но этот вариант далеко не оптимален. Гораздо лучше было бы, если бы у нас имелась отдельно картинка автомобиля, которая совсем не зависела бы от остального потока элементов. В этом случае мы смогли бы «таскать» автомобиль, выбирая для него нужное расположение. Как раз такую возможность нам предоставляет свойство CSS под названием position.
Указанное свойство имеет следующие возможные атрибуты: position: absolute | fixed | relative | static
Относительно атрибута static следует заметить, что его можно не использовать вообще, поскольку изначально это атрибут любого элемента на странице, поэтому если указать для элемента свойство position:static, то абсолютно никаких изменений мы не увидим.
А вот 3 других атрибута — весьма полезны. Для начала давайте укажем описание каждого из них.
— absolute (абсолютный). Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
— fixed (фиксированный). По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы.
— relative (относительный). Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
Итак, как же мы можем осуществить задуманное. Все просто. Нам известна ширина макета сайта (она фиксирована). Соответственно, все что потребуется — это разместить картинку, к примеру, в шапке и спозиционировать ее относительно шапки. «Сдвигать» картинку мы можем посредством упомянутых атрибутов left (сдвиг от левой границы), top (сдвиг от верхней границы), right (сдвиг от правой границы) и bottom (сдвиг от нижней границы). Во всех четырех случаях границами будут границы элемента, относительно которого осуществляется позиционирование. И вот здесь есть небольшой нюанс, который мы сейчас увидим.
Итак, картинку автомобиля мы вырезали из макета и размещаем ее в шапке:
< a href «/» > Записки Путешественника < / a >
< h2 > на своем АВТО < br > и не только . . . < / h2 >
В результате автомобиль расположится между ссылкой (для нее установлено выравнивание float:left) и заголовком второго уровня (для него установлено выравнивание float:right) в шапке. Пока что наша картинка находится в потоке элементов. Теперь давайте «изымем» ее из этого потока, чтобы ее можно было передвигать. Установим для элемента с классом car абсолютное позиционирование:
Если сейчас обновить страницу, то никаких изменений мы не увидим. Все потому, что мы пока что не указали те самые атрибуты left, top, right и bottom. Для позиционирования элемента необходимо указывать 2 атрибута (1 из них должен отвечать за горизонтальное движение, второй — за вертикальное… например, пара left-top или left-bottom, или right-top и т.д.).
Для начала давайте укажем нулевую точку отсчета для картинки, прижав ее к верхнему левому углу:
Теперь, если обновить страницу, то мы сможем увидеть, что картинка действительно оказалась в верхнем левом углу, но не шапки, как мы могли ожидать… картинка прижалась к левому верхнему углу браузера:
Почему так произошло? Дело в том, что задав абсолютное позиционирование элементу, он начинает позиционироваться относительно элемента body. Как же сделать так, чтобы элемент позиционировался относительно другого конкретного элемента, например, относительно своего родителя — шапки? Все очень просто. Для этого мы можем задать родительскому элементу, к примеру, свойство относительного позиционирования. После этого дочерний блок будет позиционироваться уже относительно своего родителя, а не относительно элемента body.