Drag & Dropable | Hilfe bei verwendung

[.Barone]

Hallo Epvpler. Ich habe ein kleines problem.
Ich habe sogenannte "Itemslots" In diesen Kästchen (welche ein Inventar darstellen) werden Items angezeigt.
Momentan bin ich an einer Stelle angekommen wo ich nicht weiß - wie ich weiter machen soll.
Wenn der Spieler sich einloggt sollen aus einer Datenbank alle items geladen werden und anschließend in der Ausrüstung/Inventar angezeigt werden. Nur wie mache ich das am einfachsten?
Die Items werden als .jpg Bild geladen und haben in der Datenbank eine eindeutige ID woran die Bilder und Werte geladen werden. Die Items sollen von dem einen in den anderen Slot gezogen werden können.

Hier mal der code;

 Spoiler

PHP Code:

<div id="inventory">
<div id="Ausruestung">
<div class="CharHelm" class="ui-widget-header" id="Ausslot_1">Helm</div>
<div class="CharSuit" class="ui-widget-header" id="Ausslot_2">Suit</div>
<div class="CharRing" class="ui-widget-header" id="Ausslot_3">Ring</div>
<div class="CharRing2" class="ui-widget-header" id="Ausslot_4">Ring2</div>
<div class="CharBoots" class="ui-widget-header" id="Ausslot_5">Boots</div>
<div class="CharGaunts" class="ui-widget-header"id="Ausslot_6">Gaunts</div>
<div class="CharWaffe" class="ui-widget-header" id="Ausslot_7">Waffe</div>
<div class="CharWaffe2" class="ui-widget-header" id="Ausslot_8">Waffe2</div>
<div class="CharKette" class="ui-widget-header" id="Ausslot_9">Kette</div>
<div class="CharHose" class="ui-widget-header" id="Ausslot_10">Hose</div>
</div>


CSS;
#inventory{position:absolute; z-index: 2;margin-top:-148px;margin-left:470px;}
#Ausruestung{z-index: 2; -webkit-box-shadow: 0 0 5px #aaa; box-shadow: 0 0 5px #aaa; position:relative;  width:690px;height:350px;background-color:#393939; margin-top:405px; margin-left:100px; border:1px solid #CCCCFF;border-radius:3px;}
.CharHelm{margin-top: 18px;margin-left: 312px;width: 70px;height: 70px;background-color: #336600;position:absolute;border: 1px solid #CCCCFF;}
.CharSuit{margin-top: 98px;margin-left: 312px;width: 70px;height: 70px;position:absolute;background-color: #336600;border: 1px solid #CCCCFF;}
.CharHose{margin-top: 178px;margin-left: 312px; width: 70px; height: 70px; background-color: #336600; position:absolute; border: 1px solid #CCCCFF; }
.CharBoots{margin-top: 258px;margin-left: 312px;width: 70px; height: 70px; background-color: #336600; position:absolute; border: 1px solid #CCCCFF; }
.CharWaffe{margin-top: 128px;margin-left: 220px;    width: 70px;height: 70px;background-color: #336600;position:absolute;border: 1px solid #CCCCFF;}
.CharWaffe2{margin-top: 130px;margin-left:403px;width: 70px;height: 70px;background-color: #336600;position:absolute;border: 1px solid #CCCCFF;}
.CharGaunts{margin-top: 210px;margin-left: 220px;width: 70px;height: 70px;background-color: #336600;position:absolute;border: 1px solid #CCCCFF;}
.CharRing{margin-top: 48px;margin-left: 220px;width: 70px;height: 70px;background-color: #336600;position:absolute;border: 1px solid #CCCCFF;}
.CharRing2{margin-top: 48px;margin-left: 403px;width:70px;height: 70px;background-color: #336600;position:absolute;border: 1px solid #CCCCFF;}
.CharKette{margin-left: 403px;margin-top: 212px;width: 70px;height: 70px;background-color: #336600;position:absolute;border: 1px solid #CCCCFF;} 


Wie stelle ich das ambesten an? Ich möchte ebenfalls, wenn der Mauszeiger über dem Item ist, ein Tooltip mit werten anzeigen lassen -> Hat hier jemand empfehlungen?

[Synatex]

Zu den Tooltipps:
Dort gibt es diverse Plug-Ins ohne und mit jQuery und du kannst dir die ganzen Dinger mal anschauen.

Zu dem Dragable und Dropable:

Wenn du ein Element als Dropable markierst mit .dropable() kannst du an das Event "drop" einen Eventhandler dranhängen. Dort kannst du dann die ID überprüfen und ggf. einen Request an deine API schicken die das jeweilige Item dann in den Slot verschiebt.

Auf dieser Seite findest du ne' relativ gute Doku und nen kleines Tuorial darüber wie du das ganze nutzen kannst: . Andernfalls hilft dir jQuery API dir auch bei diversen Events weiter.