JSFiddle - React, Tailwind, and code Playground

by Marco Antonio Quintal

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="horizontal">
    <div id="spldvEsq">
        <div id="listA"></div>
    </div>
    <div id="splDvDir">
        <div id="listB"></div>
    </div>
</div>

CSS

#listA, #listB {
    width: 99%;
    height: 99%;
    border-color: transparent;
}

#remover{
  height: 50px;
  border: 2px solid #ccc;
}

.item {
    margin: 5px;
    padding: 5px;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 5px;
    float: left;
}

JavaScript

$("#horizontal").kendoSplitter({
panes: [
    { collapsible: true,  collapsed: false },
    { collapsible: true, collapsed: false }
]});

var listA_DS= new kendo.data.DataSource({
data: [
    { id: 0, item: "Traseira", img: "Imagens/Rodado0.png" },
    { id: 1, item: "Estepe Duplo Traseiro", img: "Imagens/Rodado1.png" },
    { id: 2, item: "Estepe Duplo", img: "Imagens/Rodado2.png" },
    { id: 3, item: "Estepe Simples", img: "Imagens/Rodado3.png" },
    { id: 4, item: "Eixo Duplo", img: "Imagens/Rodado4.png" },
    { id: 5, item: "Eixo Simples", img: "Imagens/Rodado5.png" },
    { id: 6, item: "Extensor", img: "Imagens/Rodado6.png" },
    { id: 7, item: "Extensor Sanfonado", img: "Imagens/Rodado7.png" },
    { id: 8, item: "Dianteira", img: "Imagens/Rodado8.png" },
    { id: 9, item: "Finalizador", img: "Imagens/Rodado9.png" }
],
schema: {
    model: {
        id: "id",
        fields: {
            id: { type: "number" },
            item: { type: "string" },
            img: { type: "string" }
        }
    }
}});


var listB_DS= new kendo.data.DataSource({
data: [ /* still no data */ ],
schema: {
    model: {
        id: "id",
        fields: {
            id: { type: "number" },
            item: { type: "string" },
            img: { type: "string" }
        }
    }
}});


function addStyling(e) {
this.element.css({
    "background-color": "#e0e0e0",
    "opacity": 0.6
});}

function resetStyling(e) {
this.element.css({
    "background-color": "transparent",
    "opacity": 1
});}

$("#listA").kendoListView({
dataSource: listA_DS,
 template: "<div class='item'><table> <tr> <td><img src='#: img #' /></td> <td style='vertical-align: middle;'>#: item #</td> </tr></table></div>"});


$("#listA").kendoDraggable({
filter: ".item",
hint: function(element) {
    return element.clone().css({
        "opacity": 0.6,
        "background-color": "#0cf"
    });
}});



 $("#listB").kendoListView({
dataSource: listB_DS,
template: "<div class='item'><table> <tr> <td><img...