JSFiddle - React, Tailwind, and code Playground

by grippstick

HTML

<link rel="stylesheet" href="da7xgjtj801h2.cloudfront.net/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="da7xgjtj801h2.cloudfront.net/2012.3.1315/styles/kendo.black.min.css">
<script src="http://da7xgjtj801h2.cloudfront.net/2012.3.1315/js/kendo.web.min.js"></script>
    <div id="settings_window" class="GUIWidget">

        <div id="slidesdiv" style="height:200px;width:280px;border:solid 1px white;padding:5px;overflow:hidden;">
            <span>Slides</span>
            <span>
                <div id="dragregion" class="" style="position:relative;height:200px;overflow-x:hidden;overflow-y:auto;">
                    <ul id="listView"></ul>
                    <style scoped>
                        #listView
                        {
                            border-width: 0;
                            background-color: transparent;
                            text-align: center;
                        }

                        #listView li
                        {
                            margin-bottom: 10px;
                            list-style: none;
                            float: left;
                        }
                    </style>
                </div>
            </span>
        </div>
    </div>

    <!-- This script/div defines the html layout for each slide in the list -->
    <script type="text/x-kendo-tmpl" id="slide_template">
        <li id='${ID}'><div class="k-block SlideTile">${SlideshowName}</div></li>
    </script>

CSS

.GUIWidget {
    padding: 0px;
    margin: 0px;
    text-decoration: none;
    color: #ffffff;
    background-color: #181818;
    font-family: Verdana;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid black;
    /* for IE */
    filter:alpha(opacity=90);
    /* CSS3 standard */
    opacity:0.90;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor:default;
}

.SlideTile {
    -webkit-appearance: none;
    -webkit-box-shadow: none;
    -webkit-user-select: none;
    background-color: #E3E3E3;
    background-image: none, -webkit-linear-gradient(top, #F6F6F6 0px, #EAEAEA 100%);
    background-position: 0px 50%, 0px 50%;
    background-repeat: repeat, repeat;
    border-bottom-color: #C5C5C5;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: #C5C5C5;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: #C5C5C5;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: #C5C5C5;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-style: solid;
    border-top-width: 1px;
    box-shadow: none;
    box-sizing: border-box;
    color: #2E2E2E;
    cursor: pointer;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 25px;
    line-height: 19.90625px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 2px;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 2px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    visibility: visible;
    width: 200px;
}

JavaScript

function draggableOnDragStart(e) {
        }
        
        function draggableOnDragEnd(e) {
        }

        function droptargetOnDragEnter(e) {
        }
        
        function droptargetOnDragLeave(e) {
        }
        
        function droptargetOnDrop(e) {
        }
        
        jQuery(document).ready(function($) {

            var slides = [
                    {
                        SlideshowName: "Minneapolis",
                        ID: "1001"
                    },
                    {
                        SlideshowName: "Chicago",
                        ID: "1002"
                    },
                    {
                        SlideshowName: "New York",
                        ID: "1003"
                    },
                    {
                        SlideshowName: "Boston",
                        ID: "1004"
                    },
                    {
                        SlideshowName: "Los Angelos",
                        ID: "1005"
                    },
/*
                    {
                        SlideshowName: "Item 6",
                        ID: "1006"
                    },
*/
                ];
            
            var slidesDataSource = new kendo.data.DataSource({
                data: slides
            });
            
            $("#listView").kendoListView({
                selectable: true,
                template: kendo.template($("#slide_template").html()),
                dataSource: slidesDataSource
            });

            var lv = $("#listView").data("kendoListView");

            $("#listView").kendoDraggable({
                filter: "li",
                axis:"y",
                container:$("#dragregion"),
                dragstart: draggableOnDragStart,
                dragend: draggableOnDragEnd,
                drag: function(e) {
                    console.log(e.sender.hint.offset());
                },
                hint: function(element) {
                    return...