JSFiddle - React, Tailwind, and code Playground

by pratikshah91

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/examples/shared/styles/examples.min.css">
<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://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/examples/shared/js/kendo.examples.min.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/examples/web/js/kendo.examples.nav.min.js"></script>
<ul id="panelbar">
                <li>
                    First Item
                    <ul id="widgets">
            <li><img src="../../source/styles/Kendo/sprite-vertical.png" alt=""> 01</li>
            <li><img src="../../source/styles/Kendo/sprite-vertical.png" alt=""> 02</li>
            <li><img src="../../source/styles/Kendo/sprite-vertical.png" alt=""> 03</li>
            <li><img src="../../source/styles/Kendo/sprite-vertical.png" alt=""> 04</li>
            <li><img src="../../source/styles/Kendo/sprite-vertical.png" alt=""> 05</li>
            <li><img src="../../source/styles/Kendo/sprite-vertical.png" alt=""> 06</li>
            <li><img src="../../source/styles/Kendo/sprite-vertical.png" alt=""> 07</li>
            </ul>
                </li>
            </ul>

CSS

ul#widgets{ padding:0px; margin:0px; list-style:none; float:left; display:block;}
            ul#widgets li{ padding:5px; margin:0px; list-style-type:none; width:200px; height:30px; background:#CCCCCC; margin-bottom:5px; display:block; font:24px Arial, Helvetica, sans-serif; }

#panelbar{ float:left; }

#widgets span.k-state-over{ padding:0px; margin:0px; background:none !important; cursor:pointer !important;}
#widgets span.k-state-over:hover{ padding:0px; margin:0px; background:none !important; cursor:pointer !important;}

#widgets span.k-link{padding:0px; margin:0px; background:none !important; display:inline-block !important; cursor:pointer !important;}
#widgets span.k-state-selected{padding:0px; marging:0px; background:none !important;}

JavaScript

$("#panelbar").kendoPanelBar().css({ width: 310 });          
            function droptargetOnDragEnter(e) {
                $("ul#widgets li").mouseover(function(){
                    $(this).css({background:"#999999"});
                });
                
                $("ul#widgets li").mouseout(function(){
                    $(this).css({background:"#CCCCCC"});
                });


            }
            
            function droptargetOnDragLeave(e) {
                $target = $(e.target);
                $draggable = $(e.draggable.currentTarget);
            }
            
            function draggableOnDragEnd(e) {
                $target = $(e.target);
                $target.css({border:"none"});
            }
            
            function droptargetOnDrop(e) {
                $target = $(e.target);
                previous = $target.prev( 'li:last' );
                next = $target.next( 'li:first' );
                $draggable = $(e.draggable.currentTarget);
                 if (previous.size() > 0) {
                     $draggable.insertAfter(previous);
                 } else if (next.size() > 0) {
                    $draggable.insertBefore(next);
                 }
            }
            
            $('ul#widgets').kendoDropTarget({
                dragenter: droptargetOnDragEnter,
                dragleave: droptargetOnDragLeave,
                drop: droptargetOnDrop
                
            });
            $('ul#widgets').kendoDraggable({
                filter: 'li',
                hint: function(item) {
                    return $(item).clone().css({background:"#CCCCCC", height:"30px", width:"200px", opacity:"0.5", border:"1px solid #666666"});
                },
                dragend: draggableOnDragEnd
            });