This is a migrated thread and some comments may be shown as answers.

[Solved] Nested Sortable with handlers

2 Answers 294 Views

Sortable

This is a migrated thread and some comments may be shown as answers.

Todd asked on 29 Sep 2016, 08:36 PM

So I edited a dojo example to cause the behavior. The selections / ignores work fin in the code provided. Once you turn on the handle options to different handles even you no longer can select the items in the sub lists. Any ideas? Thanks in advance.
-Todd

<html>

<head>

<meta charset="utf-8" />

<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" />

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css" />

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css" />

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>

</head>

<body>

<ul id="parent">

<li class="list-item"><span class="handler"></span><div><label>Apples</label></div></li>

<li class="list-item"><span class="handler"></span><div><label>Grapefruits</label></div></li>

<li class="list-item">

<span class="handler"></span><div>

<label>group</label>

<ul class="nested">

<li class="sub-list-item">

<span class="subhandler"></span>Cranberries</li>

<li class="sub-list-item"><span class="subhandler"></span>Pineapples</li>

<li class="sub-list-item"><span class="subhandler"></span>Strawberries</li>

</ul>

</div>

</li>

<li class="list-item">

<span class="handler"></span>group2

<ul class="nested">

<li class="sub-list-item"><div><span class="subhandler"></span>Cranberries</div></li>

<li class="sub-list-item"><span class="subhandler"></span>Pineapples</li>

<li class="sub-list-item"><span class="subhandler"></span>Strawberries</li>

</ul>

</li>

</ul>

<style>

.handler {

width: 16px;

height: 16px;

background-color: #FF0000;

display: inline-block;

}

.subhandler {

width: 16px;

height: 16px;

background-color: #FFFF00;

display: inline-block;

}

</style>

<script>

function placeholder(element) {

return $("<li style='color: red;' class='list-item' id='placeholder'>Drop Here!</li>");

}

$("#parent").kendoSortable({

filter: ">li.list-item",

//handler: '.handler', //Uncomment this line

ignore: ".nested>li", //ignore nested list-items

placeholder: placeholder

});

$(".nested").kendoSortable({

//handler: '.subhandler', //And uncomment this line and the sorting will no longer work...

filter: ".sub-list-item",

placeholder: placeholder

});

</script>

</body>

</html>

2 Answers, 1 is accepted

answered on 30 Sep 2016, 06:07 PM

Okay an answer to my own question though I think it is not a great solution. Use a whitespace selector for the ignore pattern in the parent list... If you have a better answer please let me know.

<ul id="sortable">

<li class="sort">

<div>

<span class="hand"></span>

<ul class="nested">

<li class="not-sub-sort">

<div><span class="nestedhand"></span>ItemB1<input type="text" /></div>

</li>

<li class="sub-sort">

<div><span class="nestedhand"></span>ItemB2<input type="text" /></div>

</li>

<li class="sub-sort">

<div><span class="nestedhand"></span>ItemB3<input type="text" /></div>

</li>

</ul>

</div>

</li>

<li class="sort"><div><span class="hand"></span>ItemA2 <input type="text" /></div></li>

<li class="sort"><div><span class="hand"></span>ItemA3 <input type="text" /></div></li>

<li class="not-sort">

<div>

<span class="hand"></span>

<ul class="nested">

<li class="not-sub-sort">

<div><span class="nestedhand"></span>ItemB1<input type="text" /></div>

</li>

<li class="sub-sort">

<div><span class="nestedhand"></span>ItemB2<input type="text" /></div>

</li>

<li class="sub-sort">

<div><span class="nestedhand"></span>ItemB3<input type="text" /></div>

</li>

</ul>

</div>

</li>

</ul>

<script>

$("#sortable").kendoSortable({

handler: '.hand',

ignore: ".nested *",

filter: ">li.sort"

});

$(".nested").kendoSortable({

handler: '.nestedhand',

ignore: 'input',

filter:'>li.sub-sort'

});

</script>

<style>

.hand, .nestedhand {

background-color: #f00;

width: 20px;

height: 20px;

display: inline-block;

}

</style>