Problems:
Theorderandquantityofthefirstcolumnboxesshouldnotbechanged.Icouldnotjustleavethemfor
DRAG
,thatis,Icannotremoveaboxfromthesecondandpassitbacktocoluna1
,butbetweenthecolumnsofthedayoftheweekandwithoutgeneratingcopies.Ineedeveryday,
SEGUNDA,TERÇA,QUARTA...
tobelimitedaccordingtotheruleshowninthe(checkattachment)image.Theorderoftheboxesdoesnotmatterforeachday.Whatmattersisthelimit.Exemplo:
Neverinadayshouldyouhavetwocasesworthafile.Whentherearetwoclicksintheboxesthatareonthedayoftheweek,theboxshoulddisappearandthishappens,butwithanerror.Icannotdeletemorethanoneboxwiththesameclass.
Thebigchallengeis
QUARTACAIXA
.Itcanbeplacedunlimitedonanylimitofboxeswithindays,ie:**InthesecondIcanaddSOMENTECAIXASDOTIPO4*
*.- EXTRA:HowcouldI,via
AJAX
,savethesevaluestoadatabasetable?ShouldIputinputs
insteadofdivs
?Createaform
?Oristhereawaytodetecttheclickofabuttonandcapturetheinformationofeachid="seg"
,id="ter"
, etc ...?
WHAT I ALREADY HAVE
var sum = 0;
$('.nip').sortable({
revert: 'invalid',
connectWith: '.nip',
forcePlaceholderSize: false,
helper: function(e,li) {
copyHelper= li.clone().insertAfter(li);
return li.clone();
},
stop: function(){
// habilitando todos os sortables
$('.nip').each(function(){
var $this = $(this);
sum = parseFloat($(this).text()); //ou this.innerHTML, this.innerText
console.log('SUM: '+ sum);
$this.css('borderColor','gray');
$this.sortable('enable');
});
}
});
/* AQUI ELE REMOVE, MAS REMOVE SOMENTE UM */
$('ul.ui-sortable li').dblclick(function() {
$(this).remove();
});
$('.nip li').mousedown(function(){
// Verifique o número de elementos no sortable
$('.nip').not($(this).parent()).each(function(){
var $this = $(this);
if($this.find('.drag').length >= 4){
$this.css('borderColor','red');
$this.sortable('disable');
} else {
$this.css('borderColor','gray');
$this.sortable('enable');
}
});
})
.nip { display:inline-block; margin:5px; border:1px solid grey; vertical-align:top; }
.nips { display:inline-block; margin:5px; border:1px solid grey; vertical-align:top; }
ul { min-width:100px; min-height:60px; }
li.um { color: #fff; background-color: red; text-align: center; padding: 60px 20px 20px 20px; width:50px; height:60px; margin:5px; border:1px solid silver; }
li.dois { color: #fff; background-color: blue; text-align: center; padding: 30px 20px 20px 20px; width:50px; height:30px; margin:5px; border:1px solid silver; }
li.tres { color: #fff; background-color: green; text-align: center; padding: 20px 20px 20px 20px; width:50px; height:15px; margin:5px; border:1px solid silver; }
li.quatro { color: #fff; background-color: black; text-align: center; padding: 10px 20px 20px 20px; width:50px; height:7px; margin:5px; border:1px solid silver; }
.semana{
width: 960px;
margin: 0 auto;
}
.caixa{
float: left;
}
.caixa p{
font-family: arial;
padding: 10px;
text-align: center;
}
#drags{float: left;}
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><linkrel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://fiddle.jshell.net/css/normalize.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script><ulclass='nip'id="drags">
<li class="um">1</li>
<li class="dois">2</li>
<li class="tres">3</li>
<li class="quatro">4</li>
</ul>
<div class="semana">
<div class="caixa">
<p>SEGUNDA</p>
<ul class='nip' id="seg"></ul>
</div>
<div class="caixa">
<p>TERÇA</p>
<ul class='nip' id="ter"></ul>
</div>
<div class="caixa">
<p>QUARTA</p>
<ul class='nip' id="quar"></ul>
</div>
<div class="caixa">
<p>QUINTA</p>
<ul class='nip' id="quin"></ul>
</div>
<div class="caixa">
<p>SEXTA</p>
<ul class='nip' id="sext"></ul>
</div>
<div class="caixa">
<p>SÁBADO</p>
<ul class='nip' id="sab"></ul>
</div>
<div class="caixa">
<p>DOMINGO</p>
<ul class='nip' id="dom"></ul>
</div>
</div>