I cannot remove an item from the drag and drop + sortable list

Question

Hello, I have the following situation... I have to develop a screen where the rounds of a truck are mounted. To do this, the customer needs a "drag" feature on the vehicle parts.

The screen should have two div, the first should contain the pieces that can be added. The second, you must store what you drag and reorder with the same click and drag function.

You should also allow the removal of these pieces from the second div, the removal will be done by dragging to a third div.

With my current code, it does not remove at all. It is as if it could not identify the id of the run. Follow my current code.

<div id="remover">Remover!</div>
<div id="horizontal">
    <div id="spldvEsq">
        <div id="listA"></div>
    </div>
    <div id="splDvDir">
        <div id="listB"></div>
    </div>
</div>


$("#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 src='#: img #' /></td> <td style='vertical-align: middle;'>#: item #</td> </tr></table></div>"});

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

$("#listB").kendoDropTarget({
dragenter: addStyling,
dragleave: resetStyling,
drop: function(e) { 
    var draggableElement = e.draggable.currentTarget,
    dataItem = listA_DS.getByUid(draggableElement.data("uid"));
    dataItem.id = dataItem.id;
    listB_DS.add(dataItem); 
    resetStyling.call(this); 
}});

 $("#remover").kendoDropTarget({
dragenter: addStyling,
dragleave: resetStyling,
drop: function(e) { 
    var draggableElement = e.draggable.currentTarget,
    dataItem = listB_DS.getByUid(draggableElement.data("uid")); 
    listB_DS.remove(dataItem.id); 
    resetStyling.call(this); 
}});
#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;
}

Answer 1

You should just pass the dataitem instead of dataItem.id to the remove method. Look at the datasource documentation at http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-remove

listB_DS.remove(dataItem); 

Note: For what dateItem.id = dateItem.id;? I think it was time to debug, you should remove this from there.

I made an example working here (and without the unnecessary code I told you above): http://jsfiddle.net/6hLsfqtn/

But I found some bugs. For example: if you drag from left to right the same item doubles on the left. I also found this div remove a little bad for usability. I think it is better to drag from one side to the other removing from one side and adding to the other. Like what I did here: http://jsfiddle.net/mapquintal/7zthsdmz/

Any problem leave a comment.