Port a jQuery drag-and-drop RPG Inventory system to AngularJS using directives
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have a jQuery inventory management system that I am using for my game. It has a few key features that are important to me. Note that everything you see below is already implemented in jQuery! You only need to port the code to AngularJS or rewrite it for AngularJS from the ground up, your choice.


  • Slots are places where items can be dragged too and from -- inventory slots, equipment slots, ability hotbar slots
  • Items are the things that get dragged around
  • Drag-and-drop with animations
  • Slots can have whitelist and blacklist filters based on arbitrary "item types" (strings)

For example, all of a player's inventory slots will have the item-type of "item". The player is able to equip three kinds of equipment: "weapon", "amulet", and "trinket". Only items with the corresponding item type can be dragged into those slots. So the Flaming Battle Axe of death may have "item weapon axe" as its data types, and thus be able to drag to any slots that have one of those types on their whitelist.

Port the code to AngularJS using directives and (whatever else) to allow me to easily ng-repeat on "item in player.inventory" and "item in monster.equipment" and so forth, as well as having drag-and-drop update the models correspondingly.

Status update: Practically finished. Just the animation left. Im sure you will love it :).
Supportlik almost 4 years ago
Awesome! I'm excited to see it, and see how you did it
Polatrite almost 4 years ago
I see you didn't verified my solution. You were not satisfied enough?
Supportlik almost 4 years ago
awarded to Supportlik

Crowdsource coding tasks.

2 Solutions

Sorry, but I was not able to finish the animation. I ended up with a rly messy code after I implemented it and the behaivor was only on chrome as expected. So in my opinion it was better to commit a clean and functional solution, then a bad - only for one browser - solution. I still hope the result is what u want.

Because of complexity I provide the Solution with my GitHub Account. You can access it on https://github.com/Supportlik/bountify.co---Polatrite---Drag-n-Drop

--main.js -- main example controller
--main.css -- css needed for the directive
--sf-drag.js -- needed customized library https://github.com/SimpliField/angular-sf-dragndrop
--inventory.html -- directive template
--mbInventory.js -- directive for the inventory
\lib -- not customized libs
-- angular.min.js -- angularjs
-- jquery.min.js -- jquery
\models -- more described at the models
-- inventory.js -- inventory model
-- item.js -- item model
\index.html -- start example
inventory: An inventory from the scope.
rows: A number or a variable from the scope.
columns: A number or a variable from the scope.
<mb-inventory inventory="inv" rows="rows" columns="columns"></mb-inventory>

The inventory black- and whitelist can be described at the inventory model.
The item tags and sprite can be described at the item model.

(see main controller)

Available at Github: https://github.com/Supportlik/bountify.co---Polatrite---Drag-n-Drop
The code is commented.

If you have any questions left just contact me: michael.bortlik@gmail.com

Hi bountify.co, Right click event help!

View Timeline