Drag and Drop Question Layering
January 5, 2017 12:00 AM
I've run into an issue with a drag and drop question I have on a page with a series of menus that can be opened. Unfortunately, the drag and drop images cover the menus, even with the question above the menu objects in the title explorer. The intent is to emulate the screen with the drag and drop images where they would be in the application AND have the ability to open the menus, since that's a hint for the learner if they get stuck answering the question.
I tried setting the groups to always on top and ungrouping with the same setting. I'm stumped how to get the drag and drop images to layer behind all the menu groups.
Here's a way to do it via the zIndex. When a menu button is clicked the zIndex of the menuitems is increased by 2000, when the menues are hidden the zIndex is reduced to its original value. This way the menus are above the question while open and under it if closed.
- give the choice 1-10 images a css-classname (eg. choiceImg )
- on releasing show them again
Issue though that remain still is, when having an image dragged and dropped to its position, it would be hidden too. So you also would need a check whether a choiceImg is dragged... if so..exclude from the hideaction..
Damn... must be an easier solution..
Tim, you are and have been on numerous occasions a lifesaver. This is way easier than moving all the buttons, since every time I try to move the drag and drops, it messes with the image. Out of curiosity, I noticed you have the zIndex on the File Menu and View Menu images, but none of the rest. In tinkering, I took that action off the actual menu images and it does still work, at least in Run Mode. For my own reference, it's just the buttons that I need the action on and not necessarily the images?
For whatever reason, I can't find the option to edit my last reply, so I'm adding another follow-up...
I copied the JS text from Tim's sample into my own and I can't emulate the behavior. I was able to just copy and paste the page into my course and do get the behavior.
There's one new caveat with the solution - Setting the zindex on the group ends up covering the next menu item. As soon as you open the file menu, the view menu and searches buttons are both lower in the order. I'm thinking I could use the same method to set the zindex for the buttons to a value higher than the images for the menus? Otherwise, I can also edit the menu images to be JUST the menu and not the emulation of what happens when the menu is selected.
Depending on the action to make the images visible again, I could always use a Show action in that group. Yes, it's 22 actions (11 Run JS and 11 Show), but I like it better than the other option I came up with, which is to move the drag and drop images so they're over the drag and drop area. (I really don't like this particular solution as it breaks from the simulation realism.)
@Jason: in Tims version the menuitems that have to stay on top have a CSS class ( 'ontop') to ensure you can select them all and bring them to the top. Maybe thats what your missing in your version...
This part collects references to each of the elements that has the class "ontop" (i.e. to all menu items). The variable "items" now "contains" all items:
items = document.getElementsByClassName("ontop");
The "length" of the variable contains the number of elements in it. The code within the for loop increases the zIndex of the currently adressed object by "2000" (= (new zIndex = current zIndex + 2000). The loop is repeated as long as "i" (just a counter) is smaller than the total number of elements
items[i].style.zIndex = items[i].style.zIndex + 2000;
The action doesn't only increase the zIndex of one element, but of all elements.
Each of the background images of the main menus, does the opposite, i.e. it reduces the zIndex of all elements by 2000. The action is run when the background image is hidden, i.e. when the menu is closed. The action is not needed for the submenus as these cannot be open while the main menues are closed.
I've attached a new version, that keeps the menu buttons over the menus (I've moved the buttons to the bottom of the title explorer). Each of the menu buttons now disables itself on click, so that the MouseOver image with the dotted line is not displayed, while the respective menu is open.
buttons = document.getElementsByClassName(undefined
buttons[j].style.zIndex = buttons[j].style.zIndex + 3000;
Now the buttons will be higher than the other elements without changing their position in the title explorer.
Add a similar loop to each of the background images of the main menus to substract "3000" On: Hide.
Speaking of tab focus, one reasons I had the order the way it is in the title explorer was to emulate tab/arrow order from the software. Not only does this solution change the tab order, it actually breaks tab functionality for some reason. The solution would be to use tabindex again to manually set tab order on the page, but at this point, I need to step back and resign myself to moving the drag and drop images even though I know drag and drop is not accessibility friendly).
I am not sure what I did...but I fixed it! Thanks for the code!
Jason's right, this is good stuff. I just can't get it to work for my purposes. I need to display an image (checkmark) on my drag-and-drop, but it's winding up under the drag item. I tried to implement this code, without success. I have assigned the CSS as 'ontop' to the images. I have included the set z-index on my page... not sure where it's failing...but this entire interaction has just been a mental challenge.
Discussions have been disabled for this post