<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:scriptcomplete',function(){  
 
    var thisQuestion = $('#question{QID}');
 
    // Listener on the hidden ranking <select /> elements
    $('.select-item select', thisQuestion).on('change', function(e) {
      $('.sortable-rank .inserted-rank', thisQuestion).remove();
 
      $('.sortable-rank .answer-item', thisQuestion).each(function(i) {
        $(this).prepend('<span class="inserted-rank">'+(i+1)+': </span>');
      });
    });
    });
</script>

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){  
 
    // Identify this question
    var qID = {QID};
    var thisQuestion = $('#question'+qID);
 
    // Listeners on the rankable items
    $('.ui-sortable', thisQuestion).on('sortstop', function(event, ui) {
      insertRankIndicators();
    });      
    $('.ui-sortable li', thisQuestion).on('dblclick', function(event, ui) {
 
      setTimeout(function() {
        insertRankIndicators();
      }, 100);
    });
 
    // A function to insert ranking indicators
    function insertRankIndicators() {
      $('.inserted-rank', thisQuestion).remove();
      $('.dragDropRankList li', thisQuestion).each(function(i) {
        $(this).append('<span class="inserted-rank">Nr.'+(i+1)+'</span>');
      });
    }
 
    // Insert some styles (these could be in template.css)
    var newStyles = '.ui-sortable-handle { \
              position: relative;\
            }\
            .ui-sortable li .inserted-rank { \
              position: absolute;\
              top: 5px;\
              right: 5px;\
            }';  
    $('head').append('<style type="text/css">'+newStyles+'</style>');  
  });    
</script>