Вопрос CEF Инвентарь

[Rahal123]

Делаю инвентарь по типу инвентаря majestic, не могу понять как сделать dnd.

<div className='scroll-container'>
{lines.map((line, lineIndex) => (
<div key={line-${lineIndex}} className="line">
{line.map((slot) => (
<div key={slot.id} className="slot-outline" data-free={true}>
<div className="slot" name={slot.id} >
<div class="image-holder" style="width: value; height: value;">
<div class="img-holder-background" data-w="" data-h="" data-slotid="" style="background-image: url();">
</div>
</div>
</div>
</div>
))}
</div>
))}

</div>
вот такая структура слотов с предметом внутри,предмет всегда храню в лево верхнем углы слотов,которые занимает предмет

 

[Inoi]

Если серьёзно - вбил в поиск по форуму drag-n-drop

https://ragemp.pro/threads/dnd.7179/

Даже пример есть готового в ресурсах

CEF UI Инвентарь на JS (drag-n-drop)

Привет! Давно искал инвентарь на js, но какие находил, работали не так как мне нужно. Решил написать свой, как удивительно написал за 2 дня.. Предупреждаю: логику подключения к реальной базе данных я не делал, планирую в будущем. Старое Демо...

ragemp.pro

 

[FireFeed]

Drag'n'Drop с событиями мыши

learn.javascript.ru

React Drag & Drop: «Игра в бутылки»

Привет! Меня зовут Сергей, я фронтенд-разработчик отдела спецпроектов KTS . Наш отдел занимается разработкой веб-приложений для промокампаний. Помните, как в 1-й книге о Гарри Поттере Гермиона...

habr.com