В этом уроке я расскажу, как сделать простое перетаскивание с помощью атрибутов перетаскивания HTML5. Любые элементы HTML можно сделать перетаскиваемыми.

Начнем с базовой компоновки с небом, землей, разделенной на две части: трава и пруд, а также животные. Я покажу вам, как сделать так, чтобы животных можно было перетаскивать между травой и прудом. На данный момент код такой:

Первый шаг - сделать уток и лягушку перетаскиваемыми, это делается путем добавления:

draggable = ”true” к элементу HTML, как показано во фрагменте кода ниже:

Шаг 2 - указать, что произойдет, когда мы начнем перетаскивать элемент, используя атрибут ondragstart, который вызовет функцию. Эта функция установит, какие данные необходимо перенести при перетаскивании. В этом случае функция называется «перетаскивание». Поскольку изображение связано с использованием URL-адреса, мы можем установить тип данных «текст», чтобы переносился URL-адрес изображения, а также нам нужно перенести идентификатор элемента. Итак, теперь наш HTML выглядит так:

И наша функция перетаскивания JavaScript:

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

И в JavaScript:

Затем нам нужно будет получить данные, которые были установлены при запуске перетаскивания (в функции ondragstart). В HTML мы будем использовать атрибут ondrop, который будет вызывать функцию, которая получает переданное изображение и добавляет его к элементу, в который оно помещается (здесь мы делаем как область травы, так и область пруда удаляемыми, поэтому поместите ее на оба ).

Теперь HTML:

и функция JavaScript:

Теперь у вас должна быть возможность тащить животных к пруду и обратно к траве. Вы можете найти полный код в моем GitHub.

Надеюсь, вы нашли это полезным, свяжитесь с нами, если у вас возникнут вопросы.