Drag-n-Drop Inventories is a handy bit of code you can import to add a visual drag-n-drop interface for any item. You can see at a glance how many are in your inventory, your closet, Hagnk's, and your display case, and easily drag-n-drop items between inventories without leaving the page.
As a sample, I've included a handy shop.php override (attached below, not on SVN, to prevent confusion) that adds drag-n-drop inventories for each item available in the shop, like so:
To check out this example (or just to enjoy having Drag-n-Drop Inventories in all your shops) download shop.ash from this post to your relay folder.
What Does It Do?
As you can see in the screenshot above, it adds a compact interface showing you the amount you have in:
- Inventory. Navy. To avoid possible confusion, this number includes equipped items.
- Closet. Green, like KoL uses.
- Hagnk's. Yellow. This will not appear if you have none of this item in storage, since you cannot add items back into storage once removed.
- Display. Purple. This will not appear if you lack a display case.
- Stash. Light blue. To guard against unintentional abuse, this will not appear unless you enable it by changing the dndinv_includestash setting to true (using, for example, Prefref Plus). This script makes no effort to know whether you have sufficient clan karma or permissions to take the items, so withdrawals from your clan stash may fail. Use this feature at your own risk!
So right off the bat, it's already extremely handy just to see how many of the item you have in each place.
Then we get to the fun part! For any inventory where you have items that can be accessed, the container will be draggable. Inaccessible containers (display case in Hardcore, Hagnk's with no pulls available) will be dimmed out. When you grab a valid container with your mouse, valid target inventories will flash to indicate you can move items there. Dropping the container on a valid target container will prompt you for how many items to move (you can just hit Enter if it's all of them), and then move the specified amount.
- If there's only 1 item, it will skip the (unnecessary) prompt.
- You can also skip the prompt by holding down CTRL while dropping. This will move only 1 item.
After moving items, the inventory amounts will update to reflect the change, without leaving the page.
One more nifty feature: for tradeable items, there's a little + button at the end. If you have enough meat (mousing over will show you how much), the button will be clickable to purchase one of the item in question (at which point the inventories will update to reflect your new total). Cool!
How to Add It to Your Relay Script
So, you'd like to add Drag-n-Drop Inventories to a script you're writing? No problem! You will need to do two things: 1) import dndinv.ash to your ASH script, and b) import jQuery and dndinv.js in the HTML that you are outputting.
To import dndinv.ash to your ASH script, simply add import "dndinv.ash"; to the top of the script. You can now use the function dndinv(item i), which takes a single item as a parameter and returns a string containing an HTML div (class: dndinv) for a drag-n-drop inventory for that item.
That will add the drag-n-drop inventory to your page, but it won't work without the accompanying jQuery. To import jQuery and dndinv.js to a brand new page:
To import them into an existing page that you are overriding (as in the provided shop.php sample):
page.append("<!DOCTYPE html><html><head>\n<title>My Relay Script</title>\n");
page.append("<script src=\"jquery1.10.1.min.js\"></script>\n<script src='dndinv.js'></script>\n"); // <-- the money line
page.append("seal-clubbing club<br>" + dndinv($item[seal-clubbing club])); // <-- this adds a drag-n-drop inventory for seal-clubbing clubs
It should be possible to add drag-n-drop inventories to every single item in inventory.php using this, but I've been afraid to try it!
page.replace_string("</head>", "<script src='jquery1.10.1.min.js'></script>\n<script src='dndinv.js'></script>\n</head>");
Type this in your CLI:
svn checkout https://svn.code.sf.net/p/drag-n-drop-inventories/code