# Numeric: Numeric Rank - Sortable Drag and Drop

### Left to Right Sortable Drag and Drop

This code will allow you to convert a Numeric question type into a "Left to Right Sortable Drag and Drop" exercise.

### Instructions

1. Add a Numeric question type to your survey with all of the appropriate responses
1. See article: Add a Question: Numeric Fields
1. See article: Adding JavaScript and/or CSS to a Question
2. Make sure to update your question number in the code below. The placeholder is 'Q1'
```jQuery(document).on('click touchstart', '.cm-other-specify', function(e) {
e.preventDefault();
jQuery(this).focus();
});

jQuery("<hr><div style='display: flex'><div style='width:48%; padding-left:10px'>Drag the items from the box on the left to the right and place them in order of preference!</div><div style='width:48%; padding-left:10px'>Drag the items here and sort them in order of preference!</div>").insertBefore(jQuery(".cm-numeric.fieldset"));

jQuery("<div class='dropContainer'><ul id='sortable'></ul><div></div>").appendTo(jQuery(".cm-numeric.fieldset"));

jQuery('li').each(function(){
});

jQuery(".cm-numeric-input-container").css("display", "none");

jQuery(".cm-numeric-response-set, #sortable").sortable({
connectWith: ".sortableResponseList"
}).disableSelection();

setTimeout(function() {
var boxHeight = jQuery(".cm-numeric-response-set").css("height");
jQuery(".cm-numeric-response-set").css("height", boxHeight);
jQuery("#sortable").css("height", boxHeight);
}, 200);

/* --- UPDATE QUESTION REFERENCE HERE --- */
var prevValues = "[[Q1]]";
var arr = prevValues.split(" ");

var i = 1;
while (i <= Math.max.apply(null, arr)) {
var temp = jQuery("input[type=number][value=" + i + "]").parents("li").detach();
jQuery("#sortable").append(temp);
i++;
}

jQuery("#sortable li").each(function(index) {
jQuery(this).find('.currentRank').html(index + 1);
});

if (jQuery("#sortable li").size() > jQuery('input[type=number]').prop("max")) {
jQuery("#sortable li:last").find('.currentRank').html("");
jQuery(this).find("input[type='number']").val("");
var itemToRemove = jQuery("#sortable li:last").detach();
jQuery(".cm-numeric-response-set").append(itemToRemove);
}
});

jQuery(".cm-numeric-response-set li").each(function() {
jQuery(this).find('.currentRank').html("");
jQuery(this).find("input[type='number']").val("");
});

});

jQuery("#sortable").on("sortupdate", function(event, ui) {
jQuery("#sortable li").each(function(index) {
jQuery(this).find('.currentRank').html(index + 1);
jQuery(this).find("input[type='number']").val(index + 1);
});
});

jQuery(".cm-numeric-response-set, #sortable").on( "sortstart", function( event, ui ) {
jQuery("img[data-zoom-hover-elem]").css("visibility", "hidden")
});

jQuery(".cm-numeric-response-set, #sortable").on( "sortstop", function( event, ui ) {
jQuery("img[data-zoom-hover-elem]").css("visibility", "visible");
jQuery("img[data-zoom-hover-elem]").css("display", "none")
});
jQuery(".cm-response-group").wrapAll("<div style='width: 100%;'/>");

```
1. See article: Adding JavaScript and/or CSS to a Question
```/* --------- CUSTOM --------- */
/* hide hr break and extra help text */
hr,
hr + div { display: none !important; }

/* left column */
.cm-numeric-response-set--first-column li.ui-sortable-handle {
border-color: #bbb;
margin-bottom: 0.25em;
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25);
}
.cm-numeric-response-set--first-column .currentRank {
}
.cm-response-container { margin-bottom: 0; }
.cm-response-direction-left .cm-numeric-label-container,
.cm-response-direction-right .cm-numeric-label-container {
}

/* right column */
.dropContainer {
margin-left: 2%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-webkit-box-flex: 1;
-webkit-flex: 1 1 100%;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-box-flex: 1;
-webkit-flex: 1 1 100%;
flex: 1 1 100%;
box-sizing: border-box;
}

.dropContainer #sortable {
background-color: #f8f8f8;
border: 2px dashed #bbb;
margin-left: 0;
position: relative;
}
.dropContainer #sortable:after {
content: "Drop Here";
font-size: 1.5em;
font-weight: bold;
color: #bbb;
text-align: center;
display: block;
width: 100%;
position: absolute;
top: 45%;
}

.dropContainer .cm-response-container {
}
.dropContainer #sortable li.ui-sortable-handle {
box-shadow: 0 1px 0 0 #000000;
z-index: 5;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-webkit-box-flex: 1;
-webkit-flex: 1 1 100%;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-box-flex: 1;
-webkit-flex: 1 1 100%;
flex: 1 1 100%;
}
.dropContainer li.ui-sortable-handle .currentRank {
}

.dropContainer #sortable li .currentRank {
width: 3.25em;
display: inline-block;
vertical-align: top;
}
.dropContainer #sortable li .cm-response-container {
width: calc(100% - 3.25em);
display: inline-block;
vertical-align: top;
}

/* Sortable Item */
li.ui-sortable-handle {
position: relative;
transform: scale(1);
transition: transform 200ms ease;
}
li.ui-sortable-handle:hover {
transform: scale(1.025);
}
li.ui-sortable-handle:after {
content: "● ● ●";
color: #666666;
background-color:#f8f8f8;
border-left: 1px solid #bbb;
text-align: center;
line-height: 0.75em;
position: absolute;
right: 0;
top: 0;
width: 1em;
height: 100%;
}
/*----------------------------*/
.cm-numeric {
display: flex;
width: 100% !important;
height: 100% !important;
}
ul{
height:auto !important;
min-height: 200px;
}
.cm-numeric-label {
word-break: break-word;
}
input[type=text] {
height: 24px;
}
.dropContainer .cm-numeric-label-container{
}
.cm-numeric-label-container {
display: flex !important;

}

.cm-numeric-label-container {
width: 100% !important;
}

.cm-response-group {
width: 100%;
}

.dropContainer {
width: 100%;
}

#sortable {
list-style-type: none;
margin-left: 2%;
width: 100%;
border: 1px solid #000000;
background-color: #f3fde8;
}

#sortable li {
background-color: white;
border: 1px solid #000000;
box-shadow: 1px 1px 0 0 #000000;
}

.cm-numeric-response-set li {
background-color: white;
border: 1px solid #000000;
box-shadow: 1px 1px 0 0 #000000;
}

.currentRank {
}
.dropContainer .cm-response-container {
margin-bottom: 0 !important;
border-left: 2px solid #000000;
}

.dropContainer .ui-sortable-handle .currentRank {
background: #000000;
color: #ffffff;
font-weight: bold;
border: 1px solid #ffffff;
}

.ui-sortable-handle {
cursor:move;
}
```
4. You may have to modify your question settings based on your needs. See the 2 options below.
1. RANK ALL items on the screen
• Go to the overall question settings
• In the 'VALUE RANGE', update your min to be 1 and your max to be the maximum number of responses you have in your specific question
• Turn ON the 'ONE OF EACH' toggle
• Make sure the 'REQUIRE ALL RESPONSES' toggle is on
2. RANK X of Y items on the screen
• Go to the overall question settings
• In the 'VALUE RANGE', update your min to be 1 and your max to be the maximum number of responses to be ranked on the screen in your specific question
• Turn OFF the 'ONE OF EACH' toggle
• Make sure the 'REQUIRE ALL RESPONSES' toggle is OFF

• NOTE
• This code works as is in both V1 and V2 themes