- Posts: 2
- Thank you received: 0
Ask the community, share ideas, and connect with other LimeSurvey users!
<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">#'+(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>
I try to find one .tpartner wrote: Hmm...I don't really see a CSS solution with the sortable plugin.
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ var thisQuestion = $('#question{QID}'); // Listeners on the rankable items $('.sortable-list', thisQuestion).on('sort', function(e) { insertRankIndicators(); }); $('.answer-item', thisQuestion).on('dblclick', function(event, ui) { setTimeout(function() { insertRankIndicators(); }, 100); }); // A function to insert ranking indicators function insertRankIndicators() { $('.inserted-rank', thisQuestion).remove(); $('.sortable-rank .answer-item', thisQuestion).each(function(i) { $(this).prepend('<span class="inserted-rank">'+(i+1)+': </span>'); }); } }); </script>
$('.select-item select', thisQuestion).on('change', function(e) { if(e.data.source == 'dragdrop') { insertRankIndicators(); } });