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

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

Демо

Довольно интересный скрипт. Очень часто используется на интернет-магазинах, на так называемых виртуальных витринах, где можно взять товар и положить его в корзину. Все, как в настоящем магазине. Вот до чего дошли технологии. 🙂 Ну а для простых сайтов, где нет виртуальной корзины, скрипт 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. Если что-то не получается в установке скрипта, напишите об этом в комментариях. Если понравилась запись, поделитесь ей в социальных сетях. Спасибо.

СКАЧАТЬ