Drag-n-Drop Inventories -- add an intuitive visual drag-n-drop interface for any item

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:

screen-dndinv.png

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.

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.
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 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!
 

Attachments

  • shop.ash
    1.1 KB · Views: 4
Last edited:

Erich

Member
This looks ridiculously awesome, thanks zarqon! I'll play with it in a few hours when I get back home and tell you my thoughts :)
 

zarqon

Well-known member
Thanks Erich! I developed this as part of a super-inventory relay script I have in the works, but realized it had quite a few uses outside that script so I made it importable. It feels a little silly to put 6KB of code up on Sourceforge as its own project, but like CLI Links which basically ALL my relay scripts use, I foresee quite a few of my scripts (and now, possibly others) using it, so there you are. My newest script, Skillref Plus, is already using it!
 
Last edited:

Saklad5

Member
It’d be great if you could add support for Clan Stash interaction. I often find myself buying items I could trade in karma for instead.

For instance, if you can spend 70 more Clan Karma before rollover, and your clan has 5 fortune cookies in the stash, it’d show that there are 3 fortune cookies in the stash.
 
Last edited:

zarqon

Well-known member
Not a bad idea, but the amount of Clan Karma an item costs (and the amount you have, for that matter) is not accessible in ASH without server hits. So here's what I've done. I added a ZLib setting dndinv_includestash (false by default), which if you set to true -- using Prefref Plus, for instance -- will include your clan stash as a possible inventory container. Mousing over the clan stash container will also display a warning that taking stuff from your clan stash may fail if you lack the proper karma/permission. Hopefully those two forms of protection will prevent confusion or abuse.

So that's our r3 update! While I was at it, I also fixed the dimmed-out things not actually being dimmed-out, and added a Buy button: a little + that appears after the inventories for tradeable items. If you have mall access and enough meat, the link will be activated to purchase one of the item, after which the inventories will update to reflect the new total.
 

Six Ferrets

New member
This is an awesome script! I may have noticed a bug though: when I went to the Black Market to buy the Red Zeppelin ticket, the Drag-n-Drop script duplicated itself on the Red Zeppelin tickets. So each one had two lines for Drag-n-Drop. I assume because it is the same item, just being sold for a different cost... or something like that.
 

fronobulax

Developer
Staff member
So, I have this because of PrefRefPlus but took none of the suggested actions to enable it. I was somewhat surprised to see that when I equipped the FantasyRealm G.E.M. and went to spend Rubees the store was annotated. This is not a problem (although it did force the store to be scrollable because of the bizarre window sizes I am using) but I don't think it is the expected behavior.
 

zarqon

Well-known member
The inclusion of shop.ash in the relay folder is just an example of how to add Drag-n-Drop Inventories to an existing page. I could make it toggle-able somehow but that would compromise the efficacy of the example.

Probably a better solution to help avoid others' having similar confusion is to remove shop.ash from the relay folder and include it here as an attachment.

ETA: And r6 deletes shop.ash from the repository. Since DnDInv is something to include in other scripts, the example should be optional rather than part of the install. So I have instead added it to the first post, where people can download it if they choose.
 
Last edited:

zarqon

Well-known member
@Six Ferrets: I encountered the error you mentioned today and fixed shop.ash to only add inventories once per item. Re-download in the first post.
 

zarqon

Well-known member
Today I began my first G-Lover run (just in time) and decided to add something else to the example shop.ash: now, for any item that does not be_good(), the entire item's entry will be dimmed out. This is a lot easier to see than having to scan item names for G's, and will continue to work for whatever path you're in, hopefully preventing accidental purchase of an item you can't actually use.
 

Veracity

Developer
Staff member
svn update is now saying this:

Code:
drag-n-drop-inventories not checked - exception: org.tmatesoft.svn.core.SVNException: svn: E160013: '/p/drag-n-drop-inventories/code' path not found: 404 Not Found (https://svn.code.sf.net)

Browsing the code for clilinks, I notice the following commit comment:

Transition CLI Links into a relay library.
- Merge DnD Inventories, obsoleting that script.
- Move jQuery and DataTables here.
- Add some other library functions.
- Introduce clilinks.css, containing lots of my most-used style stuff
There was more onthe way, but since I have to push an update to BatMan RE / Sera mid-transition, this is what you get!

So I gather that this project is obsolete and should be removed from svnrepo.txt?
 

zarqon

Well-known member
Aha, yes! Sorry, didn't occur to me that there was an additional place this project lived. I updated all the scripts, all the threads, my sig, and Sourceforge, but looks like there were a few places I missed. Which you caught, thanks.
 
Top