Инвентарь для игры

[spo]

Прошу подсказать как лучше реализовать инвентарь для игры.

Имеем следующее http://codepen.io/anon/pen/RoeVpo

Cцена #stage содержит два элемента #display и #inventory
Внутрь #display помещен элемент #door
Внутрь #inventory помещен элемент #key

#stage
	#display
		#door
	#inventory
		#key

При клике на предмет в инвентаре #key, курсор меняет изображение на изображение предмета. Если быть точнее курсор прячется и к его координатам привязывается изображение.
Данный подход выбран вместо простой смены изображения курсора через стили, потому что в последнем случае он не сможет перекрыть стили css, в которых установлено изображение курсора по умолчанию.

Далее, при наведении и клике на элементе #door необходимо получить результат данных событий. Но после того как курсор был скрыт а к его координатам было привязано изображение, никакие из перечисленных событий не срабатывают.

Если я правильно понимаю то нужно высчитывать и проверять координаты наводимого элемента.
Есть ли возможность обойтись без математики или это единственный способ?

Буду признателен за другие варианты решения.

[Rise]

spo, есть drag and drop события - dragstart, drag, dragenter, dragleave, dragover, drop, dragend.

[spo]

Да но это события html5, причем у меня перетаскивания как такового не подразумевается. Перетаскивание должно происходить по клику.

1. Кликнул на предмет в инвентаре - получил элемент (с изображением предмета) привязанный к координатам курсора. Так же этот подход использую для того чтобы спозиционировать изображение таким образом чтобы курсор был в его центре.
2. Навел курсор или кликнул на элемент сцены - получил событие.

Почему после первого шага не срабатывает события наведения на другие элементы сцены?

[Rise]

spo, а что не так с html5, например атрибут charset тэга meta тоже html5, у вас с этим какие-то проблемы? А с flex и calc в css или let в js проблем думаете не будет?

[spo]

Сместил координату изображения таким образом чтобы оно не перекрывало курсор и события заработали.

Понял почему не срабатывало.
Судя по всему решением данной задачи будет проверка объектов на столкновение.

[spo]

Просто не хотелось бы смешивать использование js и html5.
А еще читал тут https://learn.javascript.ru/drag-and-drop написано что "нельзя ограничить перенос внутри заданной зоны" по этому хотелось все сделать с использованием событий мыши.

p.s.: А еще я не понимаю как с html5 событиями сделать так, чтобы при клике стартовал DnD.

[Rise]

spo, html5 - слово для обозначения современных веб-технологий не более... теперь замени слово html5 в своих постах на современные веб-технологии и посмотри что получилось...