Create Sortable Parent and Child Containers
Environment
| Product | Progress® Kendo UI® Sortable for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I create nested Kendo UI Sortable containers?
Solution
The following example demonstrates how to achieve the desired scenario.
<div id="baSurveyGroupTemplateListView">
<div class="panel panel-default baSurveyGroupPanel">
<div class="panel-heading">
<h4 class="panel-title">Title 1</h4>
</div>
<div class="panel-body">
<div class="childBaSurveyGroupTemplate">
<div class="panel panel-default baSurveyGroupPanel">
<div class="panel-heading">
<h4 class="panel-title">Title 2</h4>
</div>
</div>
<div class="panel panel-default baSurveyGroupPanel">
<div class="panel-heading">
<h4 class="panel-title">Title 3</h4>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default baSurveyGroupPanel">
<div class="panel-heading">
<h4 class="panel-title">Title 1.1 </h4>
</div>
<div class="panel-body">
<div class="childBaSurveyGroupTemplate">
<div class="panel panel-default baSurveyGroupPanel">
<div class="panel-heading">
<h4 class="panel-title">Title 2.1</h4>
</div>
</div>
<div class="panel panel-default baSurveyGroupPanel">
<div class="panel-heading">
<h4 class="panel-title">Title 2.2</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$("#baSurveyGroupTemplateListView").kendoSortable({
connectWith: ".childBaSurveyGroupTemplate",
filter: "> .baSurveyGroupPanel",
axis: "y",
cursor: "move:",
hint: function (element) {
return element.clone().addClass("hint");
},
placeHolder: function (element) {
return element.clone().addClass("policy-section-panel-placeholder").text("Drop Here!");
},
change: function (e) {
alert(e.oldIndex);
alert(e.newIndex);
},
ignore: ".childBaSurveyGroupTemplate >.baSurveyGroupPanel > .panel-heading > .panel-title",
autoScroll: true
});
$(".childBaSurveyGroupTemplate").kendoSortable({
connectWith: "#baSurveyGroupTemplateListView",
filter: "> .baSurveyGroupPanel",
axis: "y",
cursor: "move",
hint: function (element) {
return element.clone().addClass("hint");
},
placeholder: function (element) {
return element.clone().addClass("policy-section-panel-placeholder").text("Drop Here!");
},
change: function (e) {
alert(e.oldIndex);
alert(e.newIndex);
},
autoScroll: true
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">