Скрипт перетаскивания изображений Drag and Drop

    Один комментарий 962

Курсор moveДоброго времени, дорогие читатели и гости моего блога. На одном из зарубежных сайтов, которые я периодически посещаю, увидел интересный эффект. Можно взять картинку, кликнув по ней мышкой и не отпуская кнопки перетащить в любое место на экране. Стало интересно как это работает и я стал копать. 🙂 Раскопки завершились весьма удачно и я откопал то, что искал. Называется это чудо — скрипт Drag and Drop.

Демо

Телеграм-канал serblog.ru

В переводе с английского означает буквально тащи-и-бросай; Бери-и-Брось) — способ оперирования элементами интерфейса в интерфейсах пользователя, как графическим, так и текстовым.

Довольно интересный скрипт. Очень часто используется на интернет-магазинах, на так называемых виртуальных витринах, где можно взять товар и положить его в корзину. Все, как в настоящем магазине. Вот до чего дошли технологии. 🙂 Ну а для простых сайтов, где нет виртуальной корзины, скрипт Drag and Drop применить тоже можно. Хотя бы для того, чтобы привлечь внимание посетителей, а этого порой так не хватает.

Теперь о главном, сам скрипт содержит не много, не мало, а 32 строчки хорошо читаемого кода. Много для того, чтобы его размещать на этой странице и мало, если подключить его к сайту. Как это сделать, сейчас объясню. Для начала скачайте скрипт Drag and Drop. Залейте его к себе на сервер и скопируйте путь к нему. Затем его нужно подключить к страницам. В разделе head пропишите строчку:

<script type="text/javascript" src="путь/drag.js"></script>

Теперь в файл стилей нужно добавить эту строчку:

.drag { position:relative; cursor:move; z-index: 100; }

И теперь, если хотите применить этот эффект к какому-то элементу, то добавьте к нему класс drag, например так:

<img class="drag" src="img/kartinka.png"/>

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

СКАЧАТЬ

Любая сумма на развитие сайта

1 комментарий
  1. Станислав:

    Здравствуйте, Александр!
    Буду искренне признателен, если найдется время и ВЫ сможете, в дополнении к прекрасному материалу:
    https://serblog.ru/skript-peretaskivaniya-izobrazhenij-drag-and-drop/
    выложить здесь, или написать ссылку на рабочий скрипт построчного списка, чтобы можно было перетаскивать строки указанным в статье методом.
    К сожалению, мой удел восторгаться талантом других, но
    самостоятельно затрудняюсь (чтобы не сделать ошибки) создать скрипт, пользуясь безупречно созданным уроком.В надежде получить любой ответ!
    С уважением. Станислав!
    Отдельный поклон Ульяновску!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *