錯綜複雜DIV /帆布放置

我一直獨自學習JavaScript/CSS/HTML通過從互聯網上只是閱讀的東西，它的我很難獲得關於如何完成我想要一個更廣闊的視野這樣學習。我正在嘗試製作一個網頁瀏覽器遊戲。

終極目標是：

要創建一個人物裝備畫面（其佈局類似於下面的圖片）和字符包屏幕。我希望能夠點擊包內的物品並將其拖放到角色設備屏幕上的所屬插槽上（不必拖放，但會很好。）包包有10個不同的插槽，每個包含一個不同的項目，我只想一次移動一個項目。

我試過的：

創建四個div的袋子。一個包含其他三個，一個包含一個畫布，在上面繪製文本「bag」，另外兩個包含5個畫布元素（包中的每個插槽）。我這樣做是爲了能夠實現「 onclick「，以便我可以抓取包內的單個物品。

字符設備屏幕似乎太複雜，無法安排使用div。設備插槽不是以很好的行列方式排列的。我希望每個設備插槽（看起來像方塊的東西）都能夠單獨點擊。我嘗試過使用浮動元素，並以不同的方式使用頁邊空白，並且它無法正常工作。我可以使用一個畫布繪製整個角色設備屏幕，但是當用戶單擊屏幕時，如何判斷畫布的哪一部分被選中？

評論：

是否有某種方式來確定用戶點擊，當點擊的元素的哪個部分？有沒有比我可以使用的div更好的東西，我錯過了？如果可以這樣做，也可能有所幫助，以使得div中的孩子不能強迫父母div超過我指定的寬度或高度（有時孩子會增加父母的大小，有時不會）。當我將孩子添加到一個div，他們似乎始終添加到最後一個元素的右側，而不是最後一個元素的下面，即使是浮動。

下圖中的字符屏幕是從一個畫布繪製的。我想安排多個小畫布在專區內以同樣的方式（每個設備插槽）（或其他方式）**編輯