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

Dev Shed Forums Sponsor:

December 30th, 2012, 02:51 PM

Guelphdad

Hockey face

Dev Shed God 7th Plane (8000 - 8499 posts)

Join Date: Nov 2001

Location: St. Catharines, Canada

Posts: 8,141

Time spent in forums: 2 Months 3 Weeks 3 Days 20 h 34 m 13 sec
Reputation Power: 1315

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>

January 3rd, 2013, 12:55 PM

Guelphdad

Hockey face

Join Date: Nov 2001

Location: St. Catharines, Canada

Posts: 8,141

Time spent in forums: 2 Months 3 Weeks 3 Days 20 h 34 m 13 sec
Reputation Power: 1315

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.

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

Developer Shed Advertisers and Affiliates