Sortablejs question

Source code: Survey setup
Survey.defaultBootstrapCss.navigationButton = "btn btn-primary";
Survey.Survey.cssType = "bootstrap";
Survey.JsonObject.metaData.addProperty("checkbox", {name: "renderAs", default: "standard", choices: ["standard", "sortablejs"]});

var survey = new Survey.Model({ questions: [
    { type: "checkbox", name: "lifepriopity", renderAs: "sortablejs", title: "Life Priorities ", isRequired: true, colCount: 0,
        choices: ["family", "work", "pets", "travels", "games"] }
]});


var widget = {
    name: "sortablejs",
    isFit : function(question) { return question["renderAs"] === 'sortablejs'; },
    htmlTemplate: `
  <div style="width:50%">
    <div class="result" style="border-style:solid;border-width:1px;border-color:#1ab394;width:100%; min-height:50px;">
      <span>move items here</span>
    </div>
    <div class="source" style="border-style:solid;border-width:1px;border-color:#1ab394;width:100%; min-height:50px; margin-top:10px;">
      <!-- ko foreach: { data: question.visibleChoices, as: 'item' } -->
        <div data-bind="attr: { 'data-value':item.value }">
          <div style="background-color:#1ab394;color:#fff;margin:5px;padding:10px;" data-bind="text:item.text"></div>
        </div>
      <!-- /ko -->
    </div>
  </div>
`,
    afterRender: function(question, el) {  
      var resultContainer = el.querySelector(".result");
      var emptyText = resultContainer.querySelector("span");
      var sourceContainer = el.querySelector(".source");
      Sortable.create(resultContainer, {
          animation: 150,
          group: {
        		name: 'top3',
        		pull: true,
        		put: true
          },
        	onSort: function (evt) {
        	  var result = [];
        	  if (evt.to.children.length === 1) {
        	      emptyText.style.display = "inline-block";
        	  } else {
        	      emptyText.style.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(sourceContainer, {
          animation: 150,
          group: {
        		name: 'top3',
        		pull: true,
        		put: true
          }
      });
    }
}

Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);