Moving abilities around as desired

Hello, I have the HTML for my game, now I'm trying to let the players move some stuff around.  I have a list of abilities 11 long, but not all of them will every ability.  So I would like for them to rearrange these abilities in whichever order they'd like. These are not repeating fields. Is this possible?  Is there some HTML I can put at the head of each division, much like a checkbox, and some CSS magick?

How are these abilities defined? Are they html elements like inputs on the character sheet, or are they abilities on the Attributes & Abilities tab? If they are html abilities, normally the only way to move things around is by putting them into a repeating section. We are specifically blocked from having any ability to manipulate the sheet layout in any other ways. That said, there was a jQuery addition introduced a while back, which might be usable for this. I wouldnt get your hopes up there, use of that feature is very much in its infancy, and its more limited than it is in other parts of the web, so it might not be posisble, and even if it is, no-one might know how to do it yet.

I'd try something like this... <!-- First Position --> <div class="first"> <div class="firstAbility show"> <!--all the stuff for the first ability--> </div> <div class="secondAbility hidden"> <!--all the stuff for the second ability--> </div> <!-- repeat for the remaining nine abilities --> </div> <div class="second"> <div class="firstAbility hidden"> <!--all the stuff for the first ability--> </div> <div class="secondAbility show"> <!--all the stuff for the second ability--> </div> <!-- repeat for the remaining nine abilities, don't include the show class for them, though --> </div> <!--repeat pattern for the remaining nine sections--> <!--In another part of the character sheet, like a configuration section--> <label>First Ability</label> <select> <option selected>firstAbility</option> <option>secondAbility</option> <!--repeat options for the remaining abilities--> </select> <label>Second Ability</label> <select> <option>firstAbility</option> <option selected>secondAbility</option> <!--repeat options for the remaining abilities--> </select> <!--repeat this pattern for the remaining sections--> Then have a sheetworker to add the class show and remove hidden in each section as appropriate for the abilities (would also need to remove show and add hidden to the existing ability in each section. For example, if I wanted my secondAbility to be first, the sheet worker would need to remove show and add hidden to the firstAbility and add show and remove hidden from the secondAbility in the first section. The CSS would be constructed to only show the relevant div in each section, all the other ones would be hidden. I've not had a chance to play around with this idea, so there are probably A LOT of things wrong with this...and perhaps it wouldn't work at all, but since we have access to IDs now, I think it should be possible...it would require the use of the jQuery functionality, though... EDIT: It's also not technically "moving around," but rather configuring the order you want stuff to display in. I don't think there's a way to get it so you can drag and drop things around on the sheet, like within a repeating section.

If I'm following your meaning (and I may not be), wouldnt this get very complex and require a lot of duplicate content if you had a decent number if abilities that you wanted to rearrange in any order? Can you post an example of how you'd do it if had 9 abilities, and wanted to order them in any order?

GiGs said: If I'm following your meaning (and I may not be), wouldnt this get very complex and require a lot of duplicate content if you had a decent number if abilities that you wanted to rearrange in any order?  Looks like I accidentally deleted part of my response, because I had mentioned that it would require A LOT of overhead with a bunch of duplicate content. GiGs said: Can you post an example of how you'd do it if had 9 abilities, and wanted to order them in any order? If I had more time and it was important to me , I'd certainly try. :)   As it stands, though...I can't make any promises, because I have too much on my plate...I only wanted to offer a thought experiment in case it shook something loose for others that they might get to work, or see something that could be streamlined more easily than what I have above. :)

I also wonder if there's a way to use flex order to accomplish this in a more streamlined fashion? The CSS would likely be a bear.

Ok, I lied...I was curious about my last idea, so I put this together... HTML: < input class =" first " type =" hidden " name =" attr_orderFirst " value =" strength " /> < input class =" second " type =" hidden " name =" attr_orderSecond " value =" dexterity " /> < input class =" third " type =" hidden " name =" attr_orderThird " value =" intelligence " /> < input class =" fourth " type =" hidden " name =" attr_orderFourth " value =" charisma " /> < div class =" abilitiesSection "> < div class =" ability str "> < label > Strength </ label > < input type =" text " name =" attr_strength " /> </ div > < div class =" ability dex "> < label > Dexterity </ label > < input type =" text " name =" attr_dexterity " /> </ div > < div class =" ability int "> < label > Intelligence </ label > < input type =" text " name =" attr_intelligence " /> </ div > < div class =" ability cha "> < label > Charisma </ label > < input type =" text " name =" attr_charisma " /> </ div > </ div > < div class =" configuration "> < h1 > Configure Order of Abilities </ h1 > < label > First </ label > < select name =" attr_orderFirst "> < option value =" strength " selected > Strength </ option > < option value =" dexterity "> Dexterity </ option > < option value =" intelligence "> Intelligence </ option > < option value =" charisma "> Charisma </ option > </ select > < label > Second </ label > < select name =" attr_orderSecond "> < option value =" strength "> Strength </ option > < option value =" dexterity " selected > Dexterity </ option > < option value =" intelligence "> Intelligence </ option > < option value =" charisma "> Charisma </ option > </ select > < label > Third </ label > < select name =" attr_orderThird "> < option value =" strength "> Strength </ option > < option value =" dexterity "> Dexterity </ option > < option value =" intelligence " selected > Intelligence </ option > < option value =" charisma "> Charisma </ option > </ select > < label > Fourth </ label > < select name =" attr_orderFourth "> < option value =" strength "> Strength </ option > < option value =" dexterity "> Dexterity </ option > < option value =" intelligence "> Intelligence </ option > < option value =" charisma " selected > Charisma </ option > </ select > </ div > CSS: . abilitiesSection { display : flex ; flex-flow : column wrap ; } . first [ value = " strength " ] ~ . abilitiesSection > . ability . str , . first [ value = " dexterity " ] ~ . abilitiesSection > . ability . dex , . first [ value = " intelligence " ] ~ . abilitiesSection > . ability . int , . first [ value = " charisma " ] ~ . abilitiesSection > . ability . cha { order : 1 ; } . second [ value = " strength " ] ~ . abilitiesSection > . ability . str , . second [ value = " dexterity " ] ~ . abilitiesSection > . ability . dex , . second [ value = " intelligence " ] ~ . abilitiesSection > . ability . int , . second [ value = " charisma " ] ~ . abilitiesSection > . ability . cha { order : 2 ; } . third [ value = " strength " ] ~ . abilitiesSection > . ability . str , . third [ value = " dexterity " ] ~ . abilitiesSection > . ability . dex , . third [ value = " intelligence " ] ~ . abilitiesSection > . ability . int , . third [ value = " charisma " ] ~ . abilitiesSection > . ability . cha { order : 3 ; } . fourth [ value = " strength " ] ~ . abilitiesSection > . ability . str , . fourth [ value = " dexterity " ] ~ . abilitiesSection > . ability . dex , . fourth [ value = " intelligence " ] ~ . abilitiesSection > . ability . int , . fourth [ value = " charisma " ] ~ . abilitiesSection > . ability . cha { order : 4 ; } You could get trickier by using a sheet worker to swap things around as well...for example, if I selected Dexterity as the first, find where Dex and swap it with what the value was in the first drop down, but this does change the order of the inputs. Edit: I'd recommend going with the sheet worker, because there is some wonkiness otherwise...

Nice! And the duplication is all in the selects, which seems perfectly fine to me. You mention wonkiness - what happens?

GiGs said: You mention wonkiness - what happens? If more than one of the items has the same order number as another, the order doesn't shift until everything is a one for one...or so it seems. If you click the image above, it's a gif, you'll see what I mean. It could also have to do with the the default values, but it could have to do with the the default order number being 0 for Flex items. I didn't have enough time to mess around with it completely...I was bored on a conference call. LOL

Finderski said: GiGs said: You mention wonkiness - what happens? If more than one of the items has the same order number as another, the order doesn't shift until everything is a one for one...or so it seems. If you click the image above, it's a gif, you'll see what I mean. It could also have to do with the the default values, but it could have to do with the the default order number being 0 for Flex items. I didn't have enough time to mess around with it completely...I was bored on a conference call. LOL Just when I start to think I'm learning HTML/CSS/Javascript... I learn I know nothing. :)

Michael D. said: Just when I start to think I'm learning HTML/CSS/Javascript... I learn I know nothing. :) Don’t confuse me with anyone who knows anything…I’m just that blind squirrel finding the occasional nut…LOL