Sortablejs question
Open in new window

Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";

Survey.JsonObject.metaData.addProperty("checkbox", {name: "renderAs", default: "standard", choices: ["standard", "sortablejs"]});

window.survey = new Survey.Model({ questions: [
    { type: "checkbox", name: "lifepriopity", renderAs: "sortablejs", title: "Life Priorities ", isRequired: true, colCount: 0,
        choices: ["family", "work", "pets", "travels", "games"] }
]});
survey.onComplete.add(function(result) {
	document.querySelector('#surveyResult').innerHTML = "result: " + JSON.stringify(result.data);
});


var widget = {
    name: "sortablejs",
    isFit : function(question) { return question["renderAs"] === 'sortablejs'; },
    htmlTemplate: `<div></div>`,
    afterRender: function(question, el) {
      var $el = $(el);
      var style = {border: "1px solid #1ab394", width:"100%", minHeight:"50px" }
      $el.append(`
        <div style="width:50%">
          <div class="result">
            <span>move items here</span>
          </div>
          <div class="source" style="margin-top:10px;">
          </div>
        </div>
      `);
      var $source = $el.find(".source").css(style);
      var $result = $el.find(".result").css(style);
      var $emptyText = $result.find("span");
      question.visibleChoices.forEach(function(choice) {
        $source.append(`<div data-value="` + choice.value +  `">
                               <div style="background-color:#1ab394;color:#fff;margin:5px;padding:10px;">` + choice.text + `</div>
                             </div>`);
      });
      
      Sortable.create($result[0], {
          animation: 150,
          group: {
        		name: 'top3',
        		pull: true,
        		put: true
          },
        	onSort: function (evt) {
        	  var result = [];
        	  if (evt.to.children.length === 1) {
        	      $emptyText.css({display: "inline-block"});
        	  } else {
        	      $emptyText.css({display: "none"});
            	  for (var i = 1; i < evt.to.children.length; i++) {
            	      result.push(evt.to.children[i].dataset.value)
            	  }
        	  }
        		question.value = result;
        	},
      });
      Sortable.create($source[0], {
          animation: 150,
          group: {
        		name: 'top3',
        		pull: true,
        		put: true
          }
      });
    }
}

Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);


$("#surveyElement").Survey({
    model: survey
});



<!DOCTYPE html>
<html>

<head>
    <title>Welcome to JQuery</title>
    <script src="https://unpkg.com/jquery"></script>
    
    <script src="https://surveyjs.azureedge.net/0.12.18/survey.jquery.js"></script>
    
    
    <script src="https://unpkg.com/sortablejs@1.5.1/Sortable.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="surveyElement"></div>
    <div id="surveyResult"></div>
    <script src="./index.js"></script>
</body>

</html>

.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;
}

.btn-green:hover, .btn-green:focus {
    background-color: #18a689;
    color: #fff;
}

.panel-footer {
    text-align: right;
    background-color: #fff;
}