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