Handle sorting Drag and Drop values with Jquery

1
Scheme in image:

Problems:

  • Theorderandquantityofthefirstcolumnboxesshouldnotbechanged.IcouldnotjustleavethemforDRAG,thatis,Icannotremoveaboxfromthesecondandpassitbacktocoluna1,butbetweenthecolumnsofthedayoftheweekandwithoutgeneratingcopies.

  • Ineedeveryday,SEGUNDA,TERÇA,QUARTA...tobelimitedaccordingtotheruleshowninthe(checkattachment)image.Theorderoftheboxesdoesnotmatterforeachday.Whatmattersisthelimit.Exemplo:Neverinadayshouldyouhavetwocasesworthafile.

  • Whentherearetwoclicksintheboxesthatareonthedayoftheweek,theboxshoulddisappearandthishappens,butwithanerror.Icannotdeletemorethanoneboxwiththesameclass.

  • ThebigchallengeisQUARTACAIXA.Itcanbeplacedunlimitedonanylimitofboxeswithindays,ie:**InthesecondIcanaddSOMENTECAIXASDOTIPO4**.

  • EXTRA:HowcouldI,viaAJAX,savethesevaluestoadatabasetable?ShouldIputinputsinsteadofdivs?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>
    
asked by anonymous 03.02.2016 / 19:18

0 answers