JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="grid"></div>

CSS

.item{
    border: 1px solid black;
}

JavaScript

var data = [
    { id: 1, text: "text 1", position: 0 },
    { id: 2, text: "text 2", position: 1 },
    { id: 3, text: "text 3", position: 2 }
]

var dataSource = new kendo.data.DataSource({
        data: data,        
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number" },
                    text: { type: "string" },
                    position: { type: "number" }
                }
            }
        }
    });

var listView = $("#grid").kendoListView({
    dataSource: dataSource,  
    template: "<div class='item'>#:text#</div>"        
}).data("kendoListView");

listView.element.kendoDraggable({
    filter: "> div.item",
    group: "listViewGroup",
    hint: function(e) {
        return "<div class='item'>" + e.text() + "</div>";
    }
});

listView.element.kendoDropTarget({
    group: "listViewGroup",
    drop: function(e) {        
        var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
            dest = $(e.target);
          
        dest = dataSource.getByUid(dest.data("uid"));

        //not on same item
        if (target.get("id") !== dest.get("id")) {
            //reorder the items
            var tmp = target.get("position");
            target.set("position", dest.get("position"));
            dest.set("position", tmp);
            
            dataSource.sort({ field: "position", dir: "asc" });
        }                
    }
});