#1
  1. Hockey face
    Devshed Supreme Being (6500+ posts)

    Join Date
    Nov 2001
    Location
    St. Catharines, Canada
    Posts
    8,147
    Rep Power
    1316

    JQuery - sortable. How to allow maximum <li> in <ul> and no duplicates


    New to using JQuery and UI and my javascript skills themselves probably leave a lot to be desired.

    My example is two baseball line-ups. I'm using sortable connected. I want to be able to create game line-ups for two games (home versus away).

    For the sake of example I've limited it to 9 players on each team and I want to allow only 5 of those players to be inserted into a game line-up (for either home or away team). I also don't want to allow duplicate player in the same line-up.

    I'm not sure how to edit the javascript to do those two things.

    Working code is here


    Code:
    <html>
    	<head>
    		<title> CSS basics </title>
    	
    	    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
    		
    		<script>
    			$(function() {
    				$( "#HomeLineUp" ).sortable({
    					connectWith: ".connectedSortableHome",
    					forcePlaceholderSize: false,
    					helper: function(e,li) {
    					copyHelper= li.clone().insertAfter(li);
    					return li.clone();
    				},
    				
    					stop: function() {
    						copyHelper && copyHelper.remove();
    					}
    				
    				});
    	
    		
    				$(".connectedSortableHome").sortable({
    					receive: function(e,ui) {
    						copyHelper= null;
    					}
    		
    				});
    				
    				$( "#HomeLineUp" ).sortable({
    				}).disableSelection();
    						
    				
    				$( "#AwayLineUp" ).sortable({
    					connectWith: ".connectedSortableAway",
    					forcePlaceholderSize: false,
    					helper: function(e,li) {
    					copyHelper= li.clone().insertAfter(li);
    					return li.clone();
    				},
    				
    					stop: function() {
    						copyHelper && copyHelper.remove();
    					}
    				
    				});
    	
    		
    				$(".connectedSortableAway").sortable({
    					receive: function(e,ui) {
    						copyHelper= null;
    											
    					}
    				
    					
    				});
    				
    
    
    				$( "#AwayLineUp" ).sortable({
    				}).disableSelection();
    
    			});
    
    
        </script>
    
    		<style>
    
    		/* ------------------------------
    HTML Redefine Tags
    ------------------------------ */
    body{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:20px; padding:0;}
    
    input, form, textarea
    h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
    h1{font-size:18px;}
    h2{font-size:14px; color:#999999;}
    h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;}
    
    a:link, a:visited{color:#0033CC;}
    a:hover{text-decoration:none;}
    
    /* ------------------------------
    PAGE STRUCTURE
    ------------------------------ */
    
    /* #container has an absolute width (900 pixel) */
    
    #container{width:900px; margin:0 auto;}
    #topbar{width:auto; display:block; height:60px;}
    #navbar{width:auto; display:block; height:28px;}
    #navbar a{heigth:28px; line-height:28px; padding:0 8px; display:inline;}
    
    #main{width:auto; display:block; padding:10px 0;}
    #column_left{width:280px; margin-right:20px; float:left;}
    #column_right{width:580px; margin-right:20px; float:left;}
    #column_right_home{width:285px; margin-right:10px; float:left;}
    #column_right_away{width:285px; float:left;}
    
    div.spacer{clear:both; height:10px; display:block;}
    
    #footer{width:auto; display:block; padding:10px 0; font-size:11px; color:#666666;}
    
    /* ------------------------------
    CUSTOM CLASSES
    ------------------------------ */
    
    /* Add here your custom classes ... */
    
    
    		</style>
    
    	</head>
    
    
    
    <body>
    <div id="container">
    <div id="topbar">Top Bar/Logo Layer</div>
    <div id="navbar">
    <a href="index.html?home">Home</a>
    <a href="index.html?about">About</a>
    <a href="mailto:guelphdad@yahoo.com">Contact me</a>
    </div>
    
    <div id="main">
    <div id="column_left">
    
    <h3>Line-up area</h3>
    
    <ul id="HomeLineUp" class="sortable">Home Line-up:
        <li>C - Tom</li>
        <li>1B - Wil</li>
        <li>2B - Pat</li>
        <li>SS - Bob</li>
        <li>3B - Ed</li>
    	<li>LF - Gil</li>
    	<li>CF - Jim</li>
    	<li>RF - Ron</li>
    	<li>P - Vic</li>
    </ul>
    
    <p></p>
    
    <ul id="AwayLineUp" class="sortable">Away Line-up:
        <li>C - Ann</li>
        <li>1B - Bea</li>
        <li>2B - Cat</li>
        <li>SS - Ivy</li>
        <li>3B - Jen</li>
    	<li>LF - Kim</li>
    	<li>CF - Lil</li>
    	<li>RF - Pam</li>
    	<li>P - Sue</li> 
    </ul>
    
    </div>
    <div id="column_right">
    	<h3>Head-to-head match-ups</h3>
    
    
    <p></p>
    	<div id="column_right_home">Home Team
    		<p></p>
    		
    		<div id="home1">
    			<ul id="hl1" class="connectedSortableHome" name="home1">Game 1
    			</ul>
    		</div>
    		<p></p>
    				
    		<div id="home2">
    			<ul class="connectedSortableHome" name="home2">Game 2
    			</ul>
    		</div>
    		<p></p>
    		
    	</div>
    
    	<div id="column_right_away">Away Team
    		
    		<p></p>
    		<div id="away1">
    			<ul class="connectedSortableAway" name="away1">Game 1
    			</ul>
    		</div>
    		<p></p>
    				
    		<div id="away2">
    			<ul class="connectedSortableAway" name="away2">Game 2
    			</ul>
    		</div>
    		<p></p>
    		
    	</div>
    </div>
    
    <!-- Don't remove spacer div. Solve an issue about container height -->
    <div class="spacer"></div>
    </div>
    <div id="footer"></div>
    </div>
    
    </body>
    </html>
  2. #2
  3. Hockey face
    Devshed Supreme Being (6500+ posts)

    Join Date
    Nov 2001
    Location
    St. Catharines, Canada
    Posts
    8,147
    Rep Power
    1316
    I've edited my code to add a counter within the receivable function. Then made the sortable list deactivate when the limit (in this case 5) is reached.

    Code:
    $(".connectedSortableHome").sortable({
    
         receive: function(e,ui) {
              copyHelper= null;
             // disable the sortable if max elements reached
    
              if(($(this).find('li').length) >4) {
                   alert('Player limit reached!');
    	       $(this).sortable("disable");
             }
    											
         }
    					
    });
    Two things I'd still like, 1) to be able to remove and destroy elements and 2) as posted previously, not allow duplicate in a list
    Last edited by Guelphdad; January 3rd, 2013 at 01:04 PM.

IMN logo majestic logo threadwatch logo seochat tools logo