1
I have a page with 3 ul sortable, I can’t move the div to empty ul, they could check my code. In the example image I cannot move the content of the div Prospect to the empty ul Negotiation and Closure. When all ul have record I can move from one to another normally, the problem is when one is empty I can’t move to it again.
// retorna oportunidade
function listaOportunidade() {
$.ajax({
type: 'post', //Definimos o método HTTP usado
dataType: 'json', //Definimos o tipo de retorno
url: 'models/readOportunidade.php', //Definindo o arquivo onde serão buscados os dados
success: function(dados) {
var linhaProspect = 0,
linhaNegociacao = 0,
linhaFechamento = 0,
valorProspect = 0,
valProspect = 0,
valorNegociacao = 0,
valNegociacao = 0,
valorFechamento = 0,
valFechamento = 0,
prospect = [],
negociacao = [],
fechamento = [];
$.each(dados, function(key, val) {
var id = val.oportunidadeId;
var valor = parseFloat(val.oportunidadeReceita);
var moeda = valor.toLocaleString("pt-BR", {
style: "currency",
currency: "BRL"
});
var card =
'<li class="group" id="' + id + '">' +
'<div class="card font14">' +
'<input type="hidden" value="' + id + '" name="idOp">' +
'<div class="card-header blue-grey lighten-5 text-muted">' +
'<div class="row">' +
'<div class="col-sm-4 mb-0"><i class="fa fa-phone mr-1"></i>' + val.oportunidadeLinha + '</div>' +
'<div class="col-sm-8 mb-0 text-right">' + moeda + '</div>' +
'</div></div>' +
'<div class="card-body text-center" style="height:80px;">' +
'<input type="hidden" value="' + val.oportunidadeFunil + '" name="opFunil">' +
'<span class="card-text">' + val.clienteNome + '</span>' +
'<small class="bottom-align-text text-right font-weight-bold text-primary">' + val.oportunidadeTipo + '</small>' +
'</div>' +
'<div class="card-footer text-muted" ng-init="tooltip()">' +
'<button class="btn btn-outline-primary btn-rounded mb-0 mt-0 btn-sm" data-toggle="modal" data-target="#modalDetalhes"><i class="fa fa-search mr-1"></i>Detalhes</button>' +
'<button class="btn-floating btn-sm btn-danger pull-right mt-0 mb-0" data-toggle="modal" data-target="#modalPerdido" data-tt="tooltip" data-placement="top" title="Negócio Perdido"><i class="fa fa-thumbs-down"></i></button>' +
'<button class="btn-floating btn-sm btn-success pull-right mt-0 mb-0" data-toggle="modal" data-target="#modalGanho" data-tt="tooltip" data-placement="top" title="Negócio Ganho"><i class="fa fa-thumbs-up"></i></button>' +
'</div></div></li>'
if (val.oportunidadeFunil == 'PROSPECT') {
linhaProspect += parseInt(val.oportunidadeLinha);
valorProspect += parseFloat(val.oportunidadeReceita);
valProspect = valorProspect.toLocaleString("pt-BR", {
style: "currency",
currency: "BRL"
});
prospect.push(card);
} else {
}
if (val.oportunidadeFunil == 'NEGOCIAÇÃO') {
linhaNegociacao += parseInt(val.oportunidadeLinha);
valorNegociacao += parseFloat(val.oportunidadeReceita);
valNegociacao = valorNegociacao.toLocaleString("pt-BR", {
style: "currency",
currency: "BRL"
});
negociacao.push(card);
} else {
}
if (val.oportunidadeFunil == 'FECHAMENTO') {
linhaFechamento += parseInt(val.oportunidadeLinha);
valorFechamento += parseFloat(val.oportunidadeReceita);
valFechamento = valorFechamento.toLocaleString("pt-BR", {
style: "currency",
currency: "BRL"
});
fechamento.push(card);
}
$("ul.droptrue").sortable({
connectWith: "ul",
scroll: false,
revert: true,
opacity: 0.8,
sort: function(e, ui) {
ui.item.toggleClass("highlight");
$(".ui-state-highlight").css({
"width": "100%",
"height": ui.item.height()
});
},
update: function(event, ui) {
var opFunil = $('input[name="opFunil"]').val();
var post = $(this).sortable('serialize');
var idOp = ui.item.attr("id");
$.ajax({
url: 'models/updateFunil.php?id=' + idOp,
type: 'post',
data: {
opFunil: opFunil
},
success: function(retorno) {
console.log(retorno);
listaOportunidade();
}
});
}
});
});
$('#linhaProspect').html(linhaProspect);
$('#valorProspect').html(valProspect);
$('#prospect').html(prospect);
$('#linhaNegociacao').html(linhaNegociacao);
$('#valorNegociacao').html(valNegociacao);
$('#negociacao').html(negociacao);
$('#linhaFechamento').html(linhaFechamento);
$('#valorFechamento').html(valFechamento);
$('#fechamento').html(fechamento);
}
});
}
listaOportunidade();<div class="row">
<div class="col-sm-4">
<div class="card border-light font-samsung-700">
<div class="card-header font20 light-blue lighten-5 text-muted">
<i class="fa fa-bullhorn mr-1"></i> PROSPECÇÃO
<hr>
<div class="d-block">
<span class="d-block"><i class="fa fa-mobile mr-1"></i> <b id="linhaProspect" class="text-left"></b> <b id="valorProspect" class="float-right"></b></span>
</div>
</div>
</div>
<ul class="list-group droptrue connectedSortable" id="prospect">
</ul>
</div>
<div class="col-sm-4">
<div class="card border-light font-samsung-700">
<div class="card-header font20 yellow lighten-5 brown-text">
<i class="fa fa-bullhorn mr-1"></i> NEGOCIAÇÃO
<hr>
<div class="d-block">
<span class="d-block"><i class="fa fa-mobile mr-1"></i> <b id="linhaNegociacao" class="text-left"></b> <b id="valorNegociacao" class="float-right"></b></span>
</div>
</div>
</div>
<ul class="list-group connectedSortable" id="negociacao">
</ul>
</div>
<div class="col-sm-4">
<div class="card border-light font-samsung-700">
<div class="card-header font20 green lighten-5 brown-text">
<i class="fa fa-bullhorn mr-1"></i> FECHAMENTO
<hr>
<div class="d-block">
<span class="d-block"><i class="fa fa-mobile mr-1"></i> <b id="linhaFechamento" class="text-left"></b> <b id="valorFechamento" class="float-right"></b></span>
</div>
</div>
</div>
<ul class="list-group droptrue connectedSortable" id="fechamento">
</ul>
</div>
</div>