[Malleys]

Не рекомендую использовать нативный d&d - слишком много ручной работы, граблей и подводных камней для чего угодно кроме "базовых примеров"

Вы определённо используете не по назначению! Это не про «переместить картинку с одного места на другое», это в первую очередь про перемещение данных и за рамки браузера тоже. Это про переместить фото на рабочий стол, перетянуть текст (например, для поиска в новой вкладке), перетянуть файл с рабочего стола в веб-приложение и пр.

Leon2110, у вас разметка определённо усложнена... Вот ваш пример (только разметка, достаточно указать, что должно перетаскиваться (атрибут draggable="true"), в какой элемент, можно перетаскивать (атрибут dropzone), также вы можете захотеть, чтобы определённые dropzone могли принимать более чем один элемент (можно сделать, например, при помощи собственного атрибута data-multiple, это вы для себя решаете, что по умолчанию dropzone принимает только один элемент, а при указании data-multiple — сколько угодно)) Вот ваш пример в более читаемом виде...

<section id="game-1">
	<h1>Расставь пропущенные слова в предложении</h1>
	<ul dropzone data-multiple>
		<li draggable="true">Магазин</li>
		<li draggable="true">Молоко</li>
		<li draggable="true">Хлеб</li>
	</ul>
	<p>
		Он пошел в <span dropzone></span>, чтобы купить <span dropzone></span> и свежий <span dropzone></span> на ужин.
	</p>
</section>

В принципе, оперируя атрибутами draggable="true", dropzone и data-multiple можно описать игры в слова, типа «заполнить пропуски», «расставить буквы», а также «собрать пазл» и пр. подобное.

При отпускании элемента с атрибутом draggable="true" над элементом с атрибутом dropzone происходит всплывающее событие drop (вообще-то оно происходит везде, но вас интересуют только взаимодействие элементов с атрибутами draggable="true" и dropzone) Отслеживая это событие, вы сможете, например, когда определённые ячейки в игре будут заполнены, проверить правильность заполнения (даже при помощи серверной программы!) Также вас наверняка интересует область видимости, т. е. чтобы в случае нескольких игр на странице, нельзя было элементы от одной игры перетаскивать в другие игры. (В скрипте, который я вам приведу, область видимости ограничивается ближайшим элементом с селектором section или .task)

Стили вы можете применить ко всем этим элементам, возможности безграничны!

Теперь рабочий пример. Вот к вашему примеру ещё «пазл», чтобы было видно, как работает область видимости — https://codepen.io/Malleys/pen/GRgXqJW?editors=1010