I am building game in which player has to “clean up” his desktop by dragging and dropping items into folders. I was pleased to find this macro, which builds upon ChapelR’s inventory system and handles drag and drop very easily.
I built first prototype, which allows me to drag items into folders.
This is code I used (just for prototype, later on desktop items will be generated on random basis):
UI.alerts work as expected, but remove-macro gives error "no elements matched the selector “#inv-christmasparty.jpg”. I checked with Element inspector, this is the correct HTML id. Why is it not found?
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B&W?” or “B\26 W\3F”.
Preface. While you may use whatever characters you wish within your element IDs, some characters make using certain kinds of selectors difficult because they have syntactical meaning within selectors. Characters that you should probably avoid using within IDs are the number sign/hash (#), which is the ID selector, and the full stop/period (.), which is the class selector—though, that’s not an exhaustive list.
The problem you’re running into here is that the ID inv-christmasparty.jpg contains the full stop/period (.). When you attempt to match it with the selector #inv-christmasparty.jpg, what you’re actually saying is select the element with the unique ID inv-christmasparty and the class jpg, which will never match your ID.
To workaround this issue:
Don’t use characters within your IDs that have special meaning within selectors.
If you cannot easily control what characters are used within your IDs—e.g., because that’s handled by the custom macro you’re using—then use a selector which is not impacted by the syntactical characters. In this case, you may use an attribute selector, rather than the ID selector, to correctly select the element in question. For example, the selector [id="inv-christmasparty.jpg"] should work—i.e., <<remove '[id="inv-christmasparty.jpg"]'>>.
Thank you, friends, for help. @TheMadExile 's solution worked perfectly. But as I continued working on game, I ran into more issues. Could I ask you for your help once again?
Drag and drop only works when I drag directly onto text. I use this CSS and would hope I can drag elements onto "folders:
Is there a CSS way to animate the droppable zone when I am dragging elements on top, like :hover ?
I changed from using fixed inventory items to generate them on random basis, which gives me more control over #id and .class. (Intention is that game will get increasingly difficult over time and player has to put more and more items into the correct folders in the same amount of time). But: if item names are generated on random basis, I cannot use the <> as suggested in description:
Can I maybe populate array with generated names and have macro check if item is contained in array? Or maybe have macro check for extension/class? Example: drop zone “texts” only accepts draggables with class “doc”?
I uploaded new prototype with randomly generated items (= files) on simulated desktop. Sorry for ugly CSS.