zarqon
Well-known member
Drag-n-Drop Inventories
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:
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.
Pro tips:
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 clilinks.ash to your ASH script, and b) import jQuery and clilinks.js in the HTML that you are outputting.
To import dndinv.ash to your ASH script, simply add import "clilinks.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):
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!
Installation
Head over to the CLI Links page (link in my sig below) and follow installation instructions there. It also has loads of other features for writing relay scripts.
Enjoy!
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!
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.
Pro tips:
- 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.
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 clilinks.ash to your ASH script, and b) import jQuery and clilinks.js in the HTML that you are outputting.
To import dndinv.ash to your ASH script, simply add import "clilinks.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:
PHP:
buffer page;
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='clilinks.js'></script>\n"); // <-- the money line
page.append("</head><body>");
page.append("seal-clubbing club<br>" + dndinv($item[seal-clubbing club])); // <-- this adds a drag-n-drop inventory for seal-clubbing clubs
page.append("</body></html>");
page.write();To import them into an existing page that you are overriding (as in the provided shop.php sample):
PHP:
page.append(visit_url());
page.replace_string("</head>", "<script src='jquery1.10.1.min.js'></script>\n<script src='clilinks.js'></script>\n</head>");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!
Installation
Head over to the CLI Links page (link in my sig below) and follow installation instructions there. It also has loads of other features for writing relay scripts.
Enjoy!
Last edited:
