KendoUI Sortable List

by OnaBai

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.flat.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<ul id="sortable">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
</ul>

CSS

li {
    width: 400px;
    padding: 4px;
    border: 3px solid white;
    list-style-type: none;
    background-color: #ff879e;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
}

li.ob-hint {
    background-color: black;
    color: white;
}

li.ob-placeholder {
    background: green;
    color: white;
}

#sortable {
    margin: 5px;
}

JavaScript

$("#sortable").kendoSortable({
    hint:function(element) {
        return element.clone().addClass("ob-hint");
    },
    placeholder:function(element) {
        return element.clone().addClass("ob-placeholder").text("drop it here");
    },
});