Drag & drop (перетаскивание).

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


QIWI: 901 371 81 06
WebMoney: R174324960197
Яндекс.Деньги: 410011513132981


Файл скрипта в формате .js лежит здесь

/*
Дата крайнего обновления: 01.11.2015
упрощён алгоритм работы скрипта
добавленно новое свойство target, запоминающее элемент, над которым была отпущена кнопка мышки
*/

Пару слов о том, как им пользоваться:

  • Подключаем скрипт к странице:
    Добавляем строчку в html-код : <SCRIPT src="js/dnd.js"></SCRIPT> (Предполагается, что скрипт лежит в папке js/ относительно вашей страницы.)
  • Применяем функцию dnd(event) к перетаскиваемому обьекту:
    <DIV onmousedown="dnd(event)">drag & drop</DIV>

Функция dnd() может принимать и большее число аргументов:

Вторым аргументом можно передать идентификатор HTML элемента, к которому будет применятся перетаскивание. Т.е. воздействуя на один объект, можно передвигать другой объект.

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

<DIV onmousedown="dnd(event, 0, function(str){ alert(str); }, 'перетащил!')">drag & drop</DIV>

Пример:

перетащи


Описание объекта Dnd:

Свойства:

element:[HTML element] Элемент, над которым будут происходить действия

x:[Number] Координата X связанная с последним событием
y:[Number] Координата Y связанная с последним событием
left:[Number] Смещение по горизонтали
top:[Number] Смещение по вертикали
ready:[Function] Функция, которая будет выполнена по завершению перетаскивания
action:[Function] Функция, которая будет выполнятся во время перетаскивания
target:[HTML element] Элемент, над которым было завершено перетаскивание

Методы:

drag(event)
Метод начинает перетаскивание объекта, принимает связанное с этим событие mousedown

drop()
Метод заканчивает перетаскивание объекта. Вызывает функцию, которая хранится в свойстве ready

move(event)
Метод перетаскивает объект вслед за указателем мыши, принимает событие mousemove. Метод вызывает функцию, которая хранится в свойтве action
 
Алексей Конан: создание веб сайтов и мобильных приложений
Телефон в Санкт-Петербурге: +7 901 3718106