Changing the layout of drag and drop ranking question

Question

I have a project in which the client would like to use the drag and drop ranking, however, the items to rank are 6 images, thus making the column fairly tall. They wanted to know if we could have the 6 images along the top and drag the top two into the ranking box below. Essentially, turning the current format sideways, two rows rather than two columns. Note the first row would have a 2x3 set of images, not 1x6.

Any CSS tricks out there?

Answer 1

I'm no CSS expert, but this is at least a start.  I put this CSS and JS in my ranking question:

<style>
.unranked_container, .ranked_container {
    height: 400px;
    width: 2000px !important;
}

.ranked_sort_area {
    width: 900px !important;
}

.container_sort_area {
    display: table;
    width: 100%;
}

.draggable_button {
    display: inline-table;
    width: 30%;
}

.ranked_bottom_label {
    display: none;
}
</style>

<script>
$(document).ready(function(){
    $('.sort_containers').append('<table><tbody><tr><td></td></tr><tr><td></td></tr></tbody></table>');
    $('.sort_containers > table > tbody > tr:first-child > td').append($('.unranked_container'));
    $('.sort_containers > table > tbody > tr:last-child > td').append($('.ranked_container'));
    
    $('.draggable_button > div').each(function(){
        if ($(this).css('clear') == 'both') {
            $(this).remove();
        }
    })
    
    $('.ranked_top_label').text('Ranked');
})
</script>

Note: the heights and widths in the CSS were determined by testing different values and finding what looked good with my images.  If your images have different dimensions than mine, these values may need to be toggled.

Comments

Thanks Zachary! This definitely gives me a starting point. I need to find a way to clear this CSS for mobile, as it currently makes it unusable. I think this is a solid start though and hopefully I can dial it in. Thank you again!