1

Olá, Estou com a seguinte situação... Tenho que desenvolver uma tela onde são montados os rodados de um caminhão. Para tal, o cliente precisa de uma funcionalidade de "arrastar" as partes do veículo.

A tela deverá ter duas div, a primeira deverá conter as peças que podem ser adicionadas. A segunda, deverá armazenar o que for arrastado podendo reordenar com a mesma função de clique e arraste.

Também deverá permitir a remoção destas peças da segunda div, a remoção será feita arrastando para uma terceira div.

Com o meu código atual, ele não remove de jeito nenhum. É como se ele não conseguisse identificar o id do rodado. Segue o meu código atual.

<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;
}

1 Resposta 1

1

Você deve apenas passar o dataitem em vez de dataItem.id para o método remove. Olhe a documentação do datasource em http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-remove

listB_DS.remove(dataItem); 

Obs.: Pra que dataItem.id = dataItem.id;? Acho que foi na hora de debugar, você deve retirar isso daí.

Fiz um exemplo funcionando aqui (e sem o código desnecessário que te falei acima): http://jsfiddle.net/6hLsfqtn/

Mas achei uns bugs. Por exemplo: se você arrastar da esquerda para a direita o mesmo item ele duplica na esquerda. Também achei esse div remover um pouco ruim para a usabilidade. Acho melhor um arrastar de um lado para o outro removendo de um lado e adicionando no outro. Como o que fiz aqui: http://jsfiddle.net/mapquintal/7zthsdmz/

Qualquer problema deixe um comentário.

4
  • Obrigada pela Resposta! O teu segundo exemplo ficou bom, mas ele não vai atender, porque a ideia é justamente que duplique na direita para que seja possível por exemplo, adicionar dois "Estepe Duplo" a montagem do caminhão. Com isso preciso que cada item que entre na direita tenha um Id único para poder remover somente ele quando necessário
    – Isa
    14/01/2015 às 9:52
  • Quando a tua observação "Obs.: Pra que dataItem.id = dataItem.id;? Acho que foi na hora de debugar, você deve retirar isso daí." é justamente para remover só um item e não todos com o mesmo nome... esse foi um dos testes que fiz e foi o com menos erro.
    – Isa
    14/01/2015 às 13:44
  • Isso não funciona. Você joga o valor de dataItem.id para dentro dele mesmo. Para implementar o que você quer você terá que fazer algum controle de cópias (Ex. Copia = 3) para remover apenas o que foi selecionado. Tente abrir outros registros no stackoverflow por tópico. Encerre esse tópico e abra outro com o problema novo pois assim mais pessoas vêem o topico sem resposta e tentam ajudar. 14/01/2015 às 13:48
  • Justamente Marco Antonio... não funciona... esse é o problema. Vou seguir a sua dica e usarei o seu exemplo (jsfiddle.net/6hLsfqtn) para exemplificar.
    – Isa
    14/01/2015 às 13:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .