Click to move ranking instead of drag and drop

Question

Is there any way I can have a drag and drop ranking question (into a container) where the respondent can click on the item to move it to the end of the list on the right rather than dragging and dropping it?

Answer 1

Interesting idea.  I've taken a stab at this by adding this code to a ranking question:

<script>
$(document).ready(function(){
    $('.container_sort_area').on('sortstart', function( event, ui ){
        $(ui.item).addClass('currentlyDragged');
    });

    $('#[% QuestionName() %]_div .draggable_button').click(function(){
        if ($(this).hasClass('currentlyDragged')) {
            $(this).removeClass('currentlyDragged');
            return;
        }
        $(this).closest('.rank_drag_container').siblings().find('.container_sort_area').append($(this));
        $('.unranked_container input[id^=[% QuestionName() %]_]').val('');
        var rankedButtons = $('.ranked_container input[id^=[% QuestionName() %]_]');
        for (var i = 0; i < rankedButtons.length; i++) {
            $(rankedButtons).eq(i).val(i + 1);
            $(rankedButtons).eq(i).siblings('.rank_display').find('.rank_number').text(i + 1);
        }
    });
})
</script>

Comments

Love it!  Thanks a heap, Zachary.