Как переместить блок вправо в css

flexbox — перенос блока на новую строку

Как при маленьком экране (к примеру max-width:480px ) сделать так, чтобы блок отправить переходил на новою строку?

.input-group < display:flex; flex-direction: row; >.modal-form < width: 100%; height: 100%; display:flex; >.modal-input-text < display: flex; align-items: center; padding: .375rem .75rem; margin-bottom: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; text-align: center; white-space: nowrap; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: .25rem; >.send-number

  
 
+380 
Отправить
 

Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 11 июл 2018 в 11:00
655 2 2 золотых знака 8 8 серебряных знаков 20 20 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

В .modal-form добавляем правило переноса элементов:

.modal-form

Тогда, если во флексбокс не будет влезать его содержимое, то оно переедет на следующую строку. Для полной уверенности в переносе можно добавить @media запрос растягивающий кнопку на 100% по ширине от родителя:

@media screen and (max-width: 480px) < .send-number < width: 100%; >> 

Как переместить блок вправо в css

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

Преимущества верстки с помощью тега

Существует два основных типа построения структуры сайта:

Табличная верстка была доминирующей еще на заре зарождения интернета. К ее преимуществам можно отнести точность заданного позиционирования. Но, тем не менее, она обладает явными недостатками. Главными из них является объемность кода и низкая скорость загрузки.

Кроме высокой скорости загрузки блочное построение сайта позволяет в несколько раз уменьшить объем кода html . В том числе и за счет использования классов CSS .

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

Блочное построение на основе тегов

Средства позиционирования

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

• left – выравнивание элемента по левому краю экрана. Обтекание остальными элементами происходит справа;
• right – выравнивание справа, обтекание остальными элементами – слева;
• none – обтекание не допускается;
• inherit – наследование значения родительского элемента.

Рассмотрим облегченный пример позиционирования блоков div с помощью этого свойства:

Теперь постараемся с помощью этого же свойства расположить третий div по центру страницы. Но, к сожалению, у float нет значения center . А при задании новому блоку значения выравнивания вправо или влево он сдвигается в указанную сторону. Поэтому остается лишь всем трем блокам задать float: left :

Но и это не является оптимальным вариантом. При уменьшении окна все слои выстраиваются в один ряд по вертикали, а при увеличении размеров – прилипают к левому краю окна. Поэтому нужен более совершенный способ выравнивание div по центру.

Центрирование слоев

В следующем примере мы будем использовать слой-контейнер, в котором разместим остальные элементы. Это решает проблему смещения блоков друг относительно друга при изменении размеров окна. Центрирование контейнера посредине осуществляется с помощью задания свойствам margin нулевого значения отступам от верхнего края и auto по бокам ( margin: 0 auto ):

Этот же пример показывает, как можно отцентровать div по горизонтали. А если немного отредактировать приведенный выше код, то можно добиться вертикального выравнивания блоков. Для этого нужно лишь изменить длину слоя-контейнера ( уменьшить его ). То есть после редактирования его css класс должен выглядеть вот так:

После изменения все блоки выстроятся строго в ряд посредине. И их положение не изменится при любых размерах окна браузера. Вот как выглядит такое центрирование div по центру по вертикали:

В следующем примере для центрирования слоев внутри контейнера мы использовали ряд новых свойств css :

Краткое описание свойств css и их значений, которые мы использовали в данном примере для центрирования div внутри div :

• display: inline-block – выравнивает блочный элемент в строку и обеспечивает его обтекание другим элементом;
• vertical-align: middle – выравнивает элемент посредине относительно родительского;
• margin-left – устанавливает отступ слева.

Как из слоя сделать ссылку

Как ни странно звучит, но такое возможно. Иногда div блок как ссылка может понадобиться при верстке различных видов меню. Рассмотрим практический пример реализации слоя-ссылки:

В данном примере с помощью строки display: block мы задали ссылке значение блочного элемента. А чтобы вся высота блока div стала ссылкой, установили height : 100%.

Скрытие и отображение блочных элементов

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

Особенно это касается главной страницы, стоимость размещения рекламы на которой является самой высокой. Поэтому и появляется проблема, куда бы « впихнуть » еще один рекламный баннер. И тут уж выравниванием div по центру страницы никак не отделаешься!

Более рациональным решением является сделать какой-нибудь блок скрывающимся. Вот простой пример такой реализации:

В данном примере расположение div блоков никак не меняется. Здесь используется простейшая функция JavaScript , меняющая значение свойства css display после нажатия на кнопку ( событие onclick ).

Синтаксис display :
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group

Как видите, данное свойство может принимать множество значений. Поэтому является очень полезным и может использоваться для позиционирования элементов. В одном из предыдущих примеров с помощью одного из его значений ( inline-block ) мы реализовали выравнивание div внутри div по центру.

Для скрытия и показа слоя мы использовали два значения свойства display :

• none – временно удаляет блочный элемент со страницы;
• block – показывает элемент как блочный.

Еще одним средством css , позволяющим скрывать и показывать элемент, является свойство visibility . Но оно обладает большим недостатком.

Мы с вами рассмотрели все основные слои настоящего сайта. Надеемся, что полученные знания позволят вам « испечь » по-настоящему вкусный ресурс.

Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное. В зависимости от типа, который устанавливается через свойство position , изменяется и система координат.

Благодаря комбинации свойств position , left , top , right и bottom элемент можно накладывать один на другой, выводить в точке с определёнными координатами, фиксировать в указанном месте, определить положение одного элемента относительно другого и др. Подобно другим свойствам CSS управление позиционированием доступно через скрипты. Таким образом, можно динамически изменять положение элементов без перезагрузки страницы, создавая анимацию и различные эффекты.

Нормальное позиционирование

Если для элемента свойство position не задано или его значение static , элемент выводится в потоке документа как обычно. Иными словами, элементы отображаются на странице в том порядке, как они идут в исходном коде HTML.

Свойства left , top , right , bottom если определены, игнорируются.

Абсолютное позиционирование

При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Задать этот тип можно через значение absolute свойства position . Координаты указываются относительно краёв окна браузера, называемого «видимой областью» (рис. 3.42).

Рис. 3.42. Значения свойств left, right, top и bottom при абсолютном позиционировании

Для режима характерны следующие особенности.

• Ширина слоя, если она не задана явно, равна ширине контента плюс значения полей, границ и отступов.
• Слой не меняет своё исходное положение, если у него нет свойств right , left , top и bottom .
• Свойства left и top имеют более высокий приоритет по сравнению с right и bottom . Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom .
• Если left задать отрицательное значение, то слой уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. Это один из способов спрятать элемент от просмотра. То же относится и к свойству top , только слой уйдёт за верхний край.
• Если left задать значение больше ширины видимой области или указать right с отрицательным значением, появится горизонтальная полоса прокрутки. Подобное правило работает и с top , только речь пойдёт о вертикальной полосе прокрутки.
• Одновременно указанные свойства left и right формируют ширину слоя, но только если width не указано. Стоит добавить свойство width и значение right будет проигнорировано. Аналогично произойдёт и с высотой слоя, только уже участвуют свойства top , bottom и height .
• Элемент с абсолютным позиционированием перемещается вместе с документом при его прокрутке.

Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов необходимо назначить свойство overflow со значением auto . Тогда при превышении контентом высоты видимой области появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left , right для ширины и top , bottom для высоты (пример 3.31).

Пример 3.31. Создание аналога фреймов

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.43. Слой header выводится в потоке как обычно, а для слоёв sidebar и content установлено абсолютное позиционирование.

Рис. 3.43. Применение абсолютного позиционирования

В браузере IE6 для абсолютно позиционированных элементов нельзя одновременно задать свойства left , right и top , bottom .

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

Для начала создадим пустой слой с идентификатором floatTip и определим его стиль. Обязательными должны быть три стилевых свойства — position со значением absolute , display со значением none скрывает слой и width задаёт ширину слоя с подсказкой. Остальные свойства используются по желанию разработчика и предназначены для изменения оформления слоя (пример 3.32).

Пример 3.32. Стиль для всплывающей подсказки

Сам скрипт состоит из двух функций — moveTip() отслеживает движение мыши и в соответствии с координатами курсора меняет положение слоя, и toolTip() управляет видимостью слоя и выводит в нём желаемый текст (пример 3.33).

Пример 3.33. Скрипт для вывода слоя

Для удобства и универсальности скрипт следует вынести в отдельный файл и подключать его через атрибут src тега

‘ + ‘Объектив: Canon EF 24-105 f/4L IS USM
‘ + ‘Вспышка: Canon Speedlite 580 EX
‘ + ‘Выдержка: 1/125
Диафрагма: 5.6′)» onmouseout=»toolTip()» />

Базовый поток документа

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

Что это значит? Во-первых, вывод элементов на страницу браузер осуществляет в том порядке, в котором они следуют в HTML коде .

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

В-третьих, положение элемента в потоке зависит от значения свойства display .

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

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

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

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

В CSS есть свойства, с помощью которых элементы можно «вырвать» из основного потока документа и задать им другое положение вне базового потока элементов.

К этим свойствам относятся position и float .

CSS-свойство position

CSS свойство position — это одно из свойств с помощью которого можно изменить базовое поведение элементов в потоке. Другими словами, данное свойство позволяет «выдернуть» любой элемент из потока документа и разместить его в другом месте относительно окна браузера или других элементов на веб-странице.

Свойство position имеет 5 значений:

• static (статичное позиционирование);
• relative (относительное);
• absolute (абсолютное);
• fixed (фиксированное);
• sticky (липкое).

static — это значение по умолчанию. Оно означает что элемент находится в базовом потоке.

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

Это, например, происходит при задании элементу position: absolute или position: fixed . В этом случае место не сохраняется за элементом. Другие элементы его «не видят» и располагаются, игнорируя его присутствие в коде.

Статичное позиционирование (static)

Свойство position со значением static элементам назначается по умолчанию . Это значение означает что элемент является не позиционированным , т.е. отображается как обычно (в потоке).

Явная установка элементу CSS-свойства position: static может понадобиться только в том случае, когда нужно переопределить другое значение position установленное элементу.

Установка CSS свойств для задания положения элемента left , top , right и bottom никакого влияния на него не оказывают, т.к. его местонахождение определяется потоком документа .

Пример выстраивания статично позиционированных элементов:

Относительное позиционирование (relative)

Установка относительного позиционирования элементу осуществляется посредством задания ему CSS свойства position: relative .

Относительно позиционированный элемент ведёт себя как элемент в потоке за исключением того, что его текущее положение можно при помощи определённых CSS свойств сместить. К этим CSS свойствам относятся left , top , right и bottom .

Например, для того чтобы элемент сдвинуть вверх или вниз относительного его исходного положения к нему нужно применить CSS свойство top или bottom :

Если одновременно установить top и bottom , то будет применено значение top , т.к. оно является более приоритетным, чем bottom :

Для сдвига элемента вправо или влево используется CSS свойство left или right :

Если одновременно установить left и right , то приоритетным будет значение, находящееся в left :

Для сдвига по двум осям нужно использовать top или bottom , и left или right :

Пример, в котором 2 элементу установим относительное позиционирование и сместим его на 20px вверх и влево относительно его исходного положения:

Если в некоторой области страницы оказываются несколько позиционированных элементов, то они перекрывают друг на друга в определённом порядке. При этом по умолчанию выше оказывается тот элемент, который ниже описан в коде. Но порядок перекрытия элементов (их положение перпендикулярное экрану, т.е. вдоль оси Z) можно изменить. Осуществляется в CSS это с помощью свойства z-index . z-index может принимать отрицательные и положительные целые число, auto и 0 . Но, хорошей практикой является использование в качестве z-index чисел из диапазона 0-9999 .

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

Абсолютное позиционирование (absolute)

Установка абсолютного позиционирования элементу осуществляется посредством задания ему position: absolute .

Этот тип позиционирования позволяет разместить элемент именно там, где вы хотите.

Позиционирование выполняется относительно ближайшего позиционированного предка.

Под позиционированным элементом понимается элемент с position , равным relative , absolute , fixed или sticky .

В этом примере позиционирование элемента #id-3 будет выполнять относительно #id-2 , т.к. он является позиционированным и является по отношению к нему более близким предком.

Если данный элемент не был бы позиционированным, то позиционирование #id-3 выполнялось бы относительно #id-1 :

Если среди предков у элемента с position: absolute нет позиционированного элемента, то в этом случае он будет позиционироваться относительно HTML страницы, т.е. элемента body .

Когда элементу устанавливаем position: absolute без указания CSS свойств, определяющих его положение, он будет находиться в том месте, в котором он был бы расположен, если бы находился в потоке. При этом другие элементы не будут его видеть, и следовательно будут располагаться, не обращая никакого внимание на него.

CSS-свойства для управления положением абсолютно позиционированного элемента работают по-другому чем с position: relative .

CSS-свойства top , bottom , left и right задают положение элемента относительно ближайшего позиционированного предка или body , если такого предка нет.

Установить ширину (высоту) абсолютно позиционированному можно с помощью установки ему двух координат top и bottom ( left и right ).

Если элементу одновременно установить top , bottom и height , то предпочтение будет отдано top и height .

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

Фиксированное позиционирование (fixed)

Задание элементу фиксированного позиционирования осуществляется посредством установки ему position: fixed .

Фиксированное позиционирование похоже на абсолютное, но в отличии от него оно всегда привязывается к краям окна браузера (viewport), и остаётся в таком положении даже при скроллинге страницы.

Фиксированное позиционирование применяется для закрепления на странице навигационных меню, кнопки «вверх», панелей с социальными кнопками и многого другого.

Совместное использование относительного и абсолютного позиционирования

Относительное позиционирование очень часто используется вместе с абсолютным позиционированием.

1. Если расположить блоки с абсолютным позиционированием в блок с относительным, то расстояния будут уже задаваться не от края окна браузера, а от границ относительного блока.
2. Например: для создания фиксированных макетов состоящих из 3 блоков, выровненных по верхнему краю. Установим высоту «400px» относительному блоку для наглядности .
3. Дополнительно к блокам можно применять свойство z-index , которое предназначено для позиционирования элементов по оси Z. Чем больше значение свойства z-index , тем ближе элемент расположен к нам, и наоборот, чем меньше значение, тем дальше расположен элемент от нас.

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

1. Как отключить scroll css
2. Как открыть visual basic
3. Что в css означает знак
4. Что значит звездочка в css

Как сдвинуть кнопку вправо css

А вообще, в чём глубинный смысл писания th вместо td? Тогда никаких оборачивающих div’ов внутри ячеек не нужно, оно само всё разбежится, как надо.

Input по правому краю (без float:left)

Кнопка позиционируется по правому краю контейнера, в котором находится форма.

Если кнопку поместить в контейнер

Все в порядке, но его высота = 0px и ревизор фаерфокса показывает, что она отображается за пределами формы, что вполне согласуется с абсолютной позицией.

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

ПС. эксперименты с её position:reative тоже ни к чему не привели.

Изменено 11 января 2015 пользователем ekkl

Ссылка на комментарий

Поделиться на других сайтах

11 ответов на этот вопрос

• Сортировать по голосам
• Сортировать по дате

Рекомендованные сообщения

Присоединяйтесь к обсуждению

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

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

Добрый день. Нуждаюсь в помощи/совете!
В корне сайта (html) создал блок с позиционированием, написал в нем номер телефона и почту. На большом мониторе блок отображается нормально, а вот если зайти через смартфон то данный блок налазит на картинку и я никак не могу это изменить. игрался с позиционированием (absolute, fixed, relativ и т.д.) но получаю на выходе либо прикрепленный блок к верхнему левому краю либо он налазит на картинку. Подскажите, что я делаю не так?
Сам сайт: http://2metra.com/
Вот код который я прописал:

Есть страница, c:
body
т.е. контент посередине.

Вопрос: есть блок , как средствами CSS сделать его «привязанным» к низу страницы так, чтобы он был одного размера с body? И соответственно менял размеры, если у body меняется.
Ну например: окно браузера уменьшили.

«привязывает» к низу, но растягивает по ширине экрана.

Всем привет! Я тут новичок, не пинайте сразу если что.
Требуется аналог position sticky для IE (в режиме совместимости с 7).
Надо чтобы в одну строку текст с кнопками и с пунктирной линией проходящей под ними посередине в любой ситуации прилипал к левой и правой границе окна, то есть чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально. Также при растягивании окна, текст за которым следуют кнопки находились слева на 20%.

То есть если сдвинуть скролл, строка с красной полоской должна остатся на месте, если растянуть окно, то красная полоса растягивается, «( Title )» немного сдвигается вправо.
Надеюсь более менее объяснил, заранее спасибо.
Забыл сказать, таких линий на форме 10 — 20 штук.

Как переместить кнопку вправо в HTML?

Как мне переместить кнопку в правую сторону в HTML?

Добавить стиль css, используя добавление свойства margin-left ссылаясь на кнопку. Следующий фрагмент кода может быть положительным или отрицательным числом для смещения кнопки влево или вправо. Обычно, если вы использовали решение кнопки, добавьте свойство margin-left, как на снимке экрана, или добавьте приведенный ниже код в настраиваемый блок html.

Как переместить позицию кнопки в HTML?

1. Сдвинуть влево — используйте отрицательное значение влево.
2. Сдвинуть вправо — используйте положительное значение для левого.
3. Вверх — используйте отрицательное значение для вершины.
4. Вниз — используйте положительное значение для вершины.

Как выровнять кнопку в HTML?

1. text-align: center — путем установки значения свойства text-align родительского тега div в центр.
2. margin: auto — установив для свойства margin значение auto.
3. display: flex — путем установки значения свойства display как flex и значения свойства justify-content как center.

Как отрегулировать правую сторону кнопки?

Если вы хотите переместить кнопку вправо, вы также можете разместить кнопку внутри элемента и добавьте свойство text-align с его значением «right» к классу «align-right» элемента .

Как мне переместить кнопку вправо в начальной загрузке?

Отвечать: Используйте класс text-right

Вы можете просто использовать класс. text-right на содержащем элементе, чтобы выровнять кнопки Bootstrap по правому краю в блоке блока или столбце сетки.

Что такое позиция в HTML?

Свойство CSS позиции устанавливает, как элемент позиционируется в документе. Свойства top, right, bottom и left определяют окончательное расположение позиционированных элементов.

Как выровнять две кнопки в одну линию?

Если у вас есть несколько кнопок, которые должны располагаться рядом на одной строке, добавьте атрибут data-inline = «true» к каждой кнопке. Это приведет к тому, что кнопки будут соответствовать ширине их содержимого, а кнопки будут располагаться на одной линии.

Как выровнять элемент по центру?

Чтобы просто центрировать текст внутри элемента, использовать выравнивание текста: центр; Этот текст расположен по центру.

Как вы выравниваете текст в HTML?

Чтобы установить выравнивание текста в HTML, использовать атрибут стиля. Атрибут style определяет встроенный стиль для элемента. Атрибут используется с тегом HTML

со свойством CSS text-align для выравнивания по центру, левому и правому краю.

Как мне разместить кнопку справа в CSS?

1. Правая сторона кнопки должна находиться на расстоянии x пикселей от правого края div.
2. Он должен находиться в той же строке, что и заголовок.
3. Должен содержаться в div (такие вещи, как float или относительное позиционирование, визуально выталкивают его из div)

Как выровнять две кнопки вправо в HTML?

Вы можете удалить поплавки и выровнять контейнер ваших «кнопок» вправо с помощью свойство text-align . Вы не хотите, чтобы ваш заголовок был выровнен по правому краю, поэтому вы должны отменить его с помощью text-align: left; .

Как разместить две кнопки рядом в HTML?

отображать: встроенный блок будет поместите кнопки рядом и text-align: center помещает кнопки в центр страницы. Надеюсь, это ответит на ваш вопрос. Используйте обычные кнопки и установите для свойства display значение inline, чтобы центрировать кнопки на одной строке.

Как переместить кнопку CSS?

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

Я получаю результат как:

Пожалуйста, помогите мне переместить кнопки под кампанией с forecast customer activity курсом.

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

1. Как отменить наследование в css
2. Как отцентровать элемент css
3. Что такое basic в информатике
4. Что такое display block в css

Создание перетаскиваемых элементов с помощью JavaScript без расширений и HTML

Перетаскивание — это распространенное пользовательское действие, встречающееся во многих графических пользовательских интерфейсах.

Существуют готовые библиотеки JavaScript для добавления функции перетаскивания в ваше приложение. Однако в некоторых ситуациях библиотека может быть недоступна, или ее использование может быть связано с издержками или зависимостями, которые не нужны вашему проекту. В таких ситуациях найти альтернативное решение поможет знание API-интерфейсов, доступных в современных браузерах.

Так, HTML Drag and Drop API использует модель событий DOM для получения информации о перетаскиваемом элементе и обновления этого элемента после перетаскивания. С обработчиками событий JavaScript вы можете превратить любой элемент в перетаскиваемый элемент или в цель перетаскивания.

В этом обучающем модуле мы построим пример перетаскиваемого элемента, используя HTML Drag and Drop API с JavaScript без расширений для использования обработчиков событий.

Предварительные требования

Для данного обучающего руководства вам потребуется следующее:

• Современный браузер с поддержкой Drag and Drop API (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

Шаг 1 — Создание проекта и начальная разметка

Наш проект будет состоять из контейнера с двумя типами дочерних элементов:

• Дочерние элементы, которые можно перетаскивать
• Дочерние элементы, в которые могут быть перетащены элементы

Откройте окно терминала и создайте новый каталог проекта:

Затем перейдите в этот каталог:

Создайте в этом каталоге файл index.html :

Добавьте базовый код веб-страницы HTML:

DOCTYPE html> html> head> title>My Drag-and-Drop Exampletitle> link rel="stylesheet" href="style.css" /> head> body> body> html> 

Добавьте между тегами перетаскиваемый элемент draggable и элемент dropzone (цель перетаскивания):

div class="example-parent"> div class="example-origin"> div id="draggable-1" class="example-draggable" > draggable div> div> div class="example-dropzone" > dropzone div> div> 

Сохраните и закройте файл. Затем создайте файл style.css :

Добавьте стили элементов в файл index.html :

.example-parent  border: 2px solid #DFA612; color: black; display: flex; font-family: sans-serif; font-weight: bold; > .example-origin  flex-basis: 100%; flex-grow: 1; padding: 10px; > .example-draggable  background-color: #4AAE9B; font-weight: normal; margin-bottom: 10px; margin-top: 10px; padding: 10px; > .example-dropzone  background-color: #6DB65B; flex-basis: 100%; flex-grow: 1; padding: 10px; > 

При этом в приложение будет добавлено определенное форматирование. Теперь вы можете открыть файл index.html в браузере и увидеть элементы draggable и dropzone .

Затем мы явно сделаем первый перетаскиваемым, добавив атрибут draggable :

div class="example-parent"> div class="example-origin"> div id="draggable-1" class="example-draggable" draggable="true" > draggable div> div> div class="example-dropzone" > dropzone div> div> 

Сохраните и закройте файл.

В заключение снова откройте файл index.html в браузере. Если мы нажмем на элемент draggable и перетащим его через экран, потребуется визуальная индикация перемещения.

По умолчанию атрибут draggable имеет значение auto . Это означает, что поведение браузера по умолчанию определяет, является ли элемент перетаскиваемым. Обычно это значит, что выделенный текст, изображения и ссылки можно перетаскивать, не задавая draggable=»true» .

Теперь у нас есть файл HTML с перетаскиваемым элементом. Мы перейдем к добавлению обработчиков onevent .

Шаг 2 — Обработка событий Drag-and-Drop в JavaScript

Сейчас, если мы отпустим мышь при перетаскивании перетаскиваемого элемента, ничего не произойдет. Чтобы при перетаскивании элементов DOM активировалось действие, нам необходимо использовать Drag and Drop API:

• ondragstart : этот обработчик событий прикрепляется к нашему элементу draggable и срабатывает при возникновении события dragstart .
• ondragover : этот обработчик событий прикрепляется к нашему элементу dropzone и срабатывает при возникновении события dragover .
• ondrop : этот обработчик событий прикрепляется к нашему элементу dropzone и срабатывает при возникновении события drop .

Примечание. Всего доступно восемь обработчиков событий: ondrag , ondragend , ondragenter , ondragexit , ondragleave , ondragover , ondragstart и ondrop . В нашем примере они требуются не все.

Вначале разместим ссылку на новый файл script.js в нашем файле index.html :

body> . script src="script.js">script> body> 

Затем создадим новый файл script.js :

Объект DataTransfer будет отслеживать информацию, связанную с текущим перетаскиванием. Чтобы обновить наш элемент после перетаскивания, нам нужен прямой доступ к объекту DataTransfer . Для этого мы можем выбрать свойство dataTransfer события DragEvent элемента DOM.

Примечание. Объект DataTransfer технически может отслеживать информацию нескольких элементов, перетаскиваемых одновременно. В нашем примере мы ограничимся перетаскиванием одного элемента.

Метод setData объекта dataTransfer можно использовать, чтобы задать информацию о состоянии перетаскивания текущего элемента. Для этого нужны два параметра:

• строка, декларирующая формат второго параметра
• фактически перемещаемые данные

Наша цель — переместить элемент draggable в новый родительский элемент. Нам нужна возможность выбрать элемент draggable с уникальным идентификатором id . Мы можем задать id перетаскиваемого элемента с помощью метода setData , чтобы его можно было использовать позднее.

Давайте снова откроем файл script.js и создадим новую функцию для использования setData :

function onDragStart(event)  event .dataTransfer .setData('text/plain', event.target.id); > 

Примечание. Сообщается, что в версиях Internet Explorer с 9 по 11 возникают проблемы при использовании ‘text/plain’ . Для этих версий браузера следует использовать формат ‘text’ .

Чтобы обновить стили CSS перетаскиваемого элемента, мы можем снова получить доступ к его стилям, используя событие DOM, и установив желаемые стили для currentTarget .

Дополним нашу функцию и изменим значение backgroundColor на yellow :

function onDragStart(event)  event .dataTransfer .setData('text/plain', event.target.id); event .currentTarget .style .backgroundColor = 'yellow'; > 

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

Теперь у нас есть функция JavaScript для начала перетаскивания.

Мы можем добавить ondragstart в элемент draggable в файле index.html :

div class="example-parent"> div class="example-origin"> div id="draggable-1" class="example-draggable" draggable="true" ondragstart="onDragStart(event);" > draggable div> div> div class="example-dropzone"> dropzone div> div> 

Откройте файл index.html в браузере. Если вы теперь попытаетесь перетащить элемент, будут применены стили, декларированные в нашей функции:

Однако если отпустить элемент, ничего не произойдет.

Следующим в этой последовательности срабатывает обработчик событий ondragover .

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

Давайте снова откроем файл script.js и создадим новую функцию для использования preventDefault : Добавьте в конец файла следующий код:

function onDragOver(event)  event.preventDefault(); > 

Теперь мы можем добавить ondragover в элемент dropzone в файле index.html :

div class="example-parent"> div class="example-origin"> div id="draggable-1" class="example-draggable" draggable="true" ondragstart="onDragStart(event);" > draggable div> div> div class="example-dropzone" ondragover="onDragOver(event);" > dropzone div> div> 

На этом этапе мы еще не написали код для обработки завершения перетаскивания. Последним в этой последовательности срабатывает обработчик событий ondrop .

Вернемся в файл script.js и создадим новую функцию.

Мы можем сослаться на ранее сохраненные данные, используя метод setData объекта dataTransfer . Мы будем использовать метод getData объекта dataTransfer . Мы задали данные id , и поэтому результат выполнения будет выглядеть так:

function onDrop(event)  const id = event .dataTransfer .getData('text'); > 

Выберем элемент draggable с полученным id :

function onDrop(event)  // . const draggableElement = document.getElementById(id); > 

Выберем элемент dropzone :

function onDrop(event)  // . const dropzone = event.target; > 

Добавим элемент draggable в dropzone :

function onDrop(event)  // . dropzone.appendChild(draggableElement); > 

Сбросим объект dataTransfer :

function onDrop(event)  // . event .dataTransfer .clearData(); > 

Теперь мы можем добавить ondrop в элемент dropzone в файле index.html :

div class="example-parent"> div class="example-origin"> div id="draggable-1" class="example-draggable" draggable="true" ondragstart="onDragStart(event);" > draggable div> div> div class="example-dropzone" ondragover="onDragOver(event);" ondrop="onDrop(event);" > dropzone div> div> 

Сделав это, мы завершили реализацию функции перетаскивания. Откройте файл index.html в браузере и перетащите элемент draggable в dropzone .

В нашем примере мы рассмотрели сценарий с одним перетаскиваемым элементом и одной целевой зоной. Мы можем использовать несколько перетаскиваемых элементов, несколько целей, и настроить все это с помощью других обработчиков событий Drag and Drop API.

Шаг 3 — Построение расширенного примера с несколькими перетаскиваемыми элементами

Приведем пример возможного использования этого API: список задач с перетаскиваемыми задачами, которые вы можете перетаскивать из столбца «Сделать» в столбец «Сделано» .

Чтобы создать собственный список задач, добавьте дополнительные перетаскиваемые элементы с уникальными id в файл index.html :

div class="example-parent"> h1>To-do listh1> div class="example-origin"> To-do div id="draggable-1" class="example-draggable" draggable="true" ondragstart="onDragStart(event);" > thing 1 div> div id="draggable-2" class="example-draggable" draggable="true" ondragstart="onDragStart(event);" > thing 2 div> div id="draggable-3" class="example-draggable" draggable="true" ondragstart="onDragStart(event);" > thing 3 div> div id="draggable-4" class="example-draggable" draggable="true" ondragstart="onDragStart(event);" > thing 4 div> div> div class="example-dropzone" ondragover="onDragOver(event);" ondrop="onDrop(event);" > Done div> div> 

Откройте index.html в браузере и перетащите элементы из столбца «Сделать» в столбец «Сделано». Вы создали приложение списка задач и протестировали его работу.

Заключение

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

Drag and Drop API предоставляет много разных возможностей настроить действия в дополнение к перетаскиванию. Например, вы можете обновлять стили CSS перетаскиваемых элементов. Также вместо перемещения вы можете копировать перетаскиваемый элемент так, чтобы при отпускании он реплицировался.

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

Чтобы узнать больше обо всех элементах, которые вы можете перетаскивать с помощью Drag and Drop API, ознакомьтесь с соответствующей документацией MDN.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.