Rank order drag and drop horizontally aligned

Hi, I took a swing at this one and I think the below comes close to what you are looking for. It uses a modified Pick, Group, and Rank question type to arrange the Groups and Items horizontally and Custom Validation so that each Group/Rank can only have 1 Item placed within it to proceed. Here is what it looks like on desktop:

To give it a try, set the survey to Classic layout and then add a Pick Group and Rank question. Give it 10 Groups and 10 Items. Enable the “Add Columns” setting. Set the Group names to be Rank 1 through Rank 10 and then enable Custom Validation so that “Each group contains” Min =1 and Max=1.

Add the below to the question’s JavaScript to move the Group container into a newly created row beneath the Items container:

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

var qid = this.questionId;
var lastrow = '#'+qid+' > div.Inner.BorderColor.DragAndDrop > div > fieldset > div > table tr:last';

jQuery(lastrow).after('<tr>...</tr>');

});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

var qid = this.questionId;
var groupcont = '#'+qid+' > div.Inner.BorderColor.DragAndDrop > div > fieldset > div > table > tbody > tr > td.groupsContainerTd.BorderColor';
var newrow = '#'+qid+' > div.Inner.BorderColor.DragAndDrop > div > fieldset > div > table > tbody > tr:nth-child(2)';

jQuery(groupcont).detach().appendTo(newrow);

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

Finally, add the below CSS to the Style section of the survey’s Look & Feel. I commented out what each piece is doing. You will want to adjust the Item columns and Group width % for however many ranks you have.

/* Use full screen */
.Skin .SkinInner {
width: 100% !important;
max-width: 100% !important;
}

/* fix Group headers */
.Skin .PGR .DragAndDrop .Group h2 {
width: 100% !important;
font-size: 12px;
}

/* Shrink Group containers */
.Skin .PGR .DragAndDrop .Group>div>ul, .Skin .PGR .DragAndDrop .Items>ul {
    min-height: 50px !important;
}

/* Shrink Group container */
.Skin .PGR .DragAndDrop td.groupsContainerTd div>div {
    min-height: 50px !important;
}

/* Remove item padding, item sizing */
.Skin .PGR .DragAndDrop .QuestionBody .Group>div>ul>li, .Skin .RO .DND>ul>li {
padding: 0px !important;
width: 100px !important;
}

/* Label sizing*/
.Skin .PGR .DragAndDrop .QuestionBody label {
width: 100px !important;
}

/* Item sizing */
.Skin .PGR .DragAndDrop .Items>ul>li {
width: 100px !important;
}

/* Hide rank */
.rank {
display: none !important;
}

/* Set Group Width and Item Columns */
@media (min-width:481px) {

.Skin .PGR .DragAndDrop .Group {
    width: 10%;
}

.Skin .PGR .DragAndDrop .Items ul {
width: 100% !important;
  columns: 10;
  -webkit-columns: 10;
  -moz-columns: 10;
}

}

@media (max-width:480px) {
.Skin .PGR .DragAndDrop .Group {
    width: 50% !important;
}

.Skin .PGR .DragAndDrop .Items ul {
width: 100% !important;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns:2;
}

}

Dear @Tom_1842 , first of all, thank you so much! You really helped me out here! Both your approaches are beautiful. I have one small question about your first approach. As you can see in the screenshot I included all the images are really squeezed together (they are normally all square sized). Do you know how I can display them with a little space in between? 

Thank you again for your amazing help and I hope you have a wonderful Friday!

Hi Tom! I checked and in Chrome I am running into the same problem. I added the QSF in this post (I had to compress it to a .zip file otherwise my MacBook would not let me export it). 

@Tom_1842 Thank you so much for helping me out! Your final suggestion worked perfectly! Have a great weekend! :)