Как создать перетаскивание объектов на предопределенное место?

Question

[lavezzi1]

Здравствуйте. Как можно на нативных возможностях браузера воссоздать подобное? https://www.futbin.com/squad-builder при клике на карту и поиске игрока его можно будет таскать с одной позиции на другую. Интересует конкретно перетаскивание карты по заданным позициям. Понятно что в основе лежит drag and drop. Но есть ли примеры подобного действия?

Спасибо

Answer 1

[twobomb]

Самый простой вариант написать самому.

Answer 2

[gleendo]

https://codepen.io/evg_/pen/wzBGvA?editors=0010

Comments

[lavezzi1]

а как сделать так чтобы он именно в нужное место страницы вставал?

[gleendo]

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

[gleendo]

lavezzi1: html5 drag&drop загуглите, все достаточно легко реализуется

[lavezzi1]

iamevg_: то есть нужно захватить координаты области места куда упадет карточка, и с текущем?

[gleendo]

lavezzi1: Вы берете объект. Начинаете его передвигать (drag). Подводите к тому месту куда бы хотели чтобы этот объект поместился. При отпускании кнопки мыши (drop), проверяете, находятся ли координаты мыши в пределе координат того места в которое хотите поместить объект. Если находятся то объекту указываете координаты целевого поля, иначе возвращаете на исходную позицию