Πρόβλημα με jquery και περιορισμό σε sortable lists

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

Πρόβλημα με jquery και περιορισμό σε sortable lists

Δημοσίευση από dva_dev » 04 Ιαν 2011 17:09

Προσπαθώ να ασχοληθώ λίγο με jquery κοιτώντας το documentation. Εχω φτιάξει μια σελίδα (demo) όπου έχω δύο συνδεδεμένες ταξινομημένες λίστες. Στη λίστα αριστερά έχω κάποιες διαθέσιμες επιλογές και θέλω να μπορώ να μεταφέρω τα στοιχεία από την αριστερή στη δεξιά και να τους αλλάξω την ταξινόμηση. Μέχρι στιγμής τα έχω ψιλοκαταφέρει με λίγο copy/paste.
Αυτό που θέλω για αρχή είναι όταν γεμίζουν τα 10 στοιχεία που χωράει η δεξιά λίστα να μην παίρνει άλλο, εκτός και αν ελευθερωθεί κάποια θέση πηγαίνοντας κάποια επιλογή πίσω στην αριστερή λίστα.
Με ψιλομαϊμουδιάρικο τρόπο έγινε και αυτό (όταν γεμίσουν τα 10 items, κάνω disconnect τις λίστες, και όταν αδειάσει τις ξανακάνω connect), αλλά έχω την εντύπωση πως πηγαίνω αθήνα-θεσσαλονίκη μέσω ιταλίας. Υπάρχει κάποιος να προτείνει κάποιον πιο straight τρόπο;

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="en" lang="en">
<head>
<title>lists</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.sortable.js"></script>

<link href="style.css" rel="stylesheet" type="text/css" />
<link href="lists.css" rel="stylesheet" type="text/css" />

<script>
	
	$&#40;
		function&#40;&#41;
		&#123;
			var allowedItems = 10;
			
			$&#40; "#sourceList, #targetList" &#41;
			.sortable
			&#40;
				&#123;
					cursor&#58; 'hand',
					connectWith&#58; '.connected',
					helper&#58; 'clone',
					placeholder&#58; "hover",
					receive&#58; function &#40;event,ui&#41;
					&#123;
						if &#40;$&#40;this&#41;.parent&#40;&#41;.attr&#40;'id'&#41; == 'targetItems'&#41;
						&#123;
							if &#40; $&#40;this&#41;.children&#40;&#41;.length < allowedItems &#41;
							&#123;
							&#125;
							else
							&#123;
								//Forbid dropping more &#40;than 10&#41; items to right list
								//$&#40;ui.sender&#41;.sortable&#40;'cancel'&#41;;
								$&#40; "#sourceList" &#41;.sortable&#40; "option", "connectWith", '' &#41;;
							&#125;
						&#125;
						else
						&#123;
							if &#40; $&#40;ui.sender&#41;.children&#40;&#41;.length < allowedItems &#41;
							&#123;
								//Allow dropping items &#40;up to 10&#41; to right list
								$&#40; "#sourceList, #targetList" &#41;.sortable&#40; "option", "connectWith", '.connected' &#41;;
							&#125;
						&#125;
					&#125;,
				&#125;
			&#41;
		&#125;
	&#41;
	.disableSelection&#40;&#41;;

	</script>

</head>
<body>
<div id="sourceItems">
  <ul id="sourceList" class="connected">
      		<li id='2'>Sunny Came Home</li>
		<li id='6'>Aur&#233;lie</li>
		<li id='10'>&#211; Mar&#237;a</li>
		<li id='14'>Alexander</li>
		<li id='18'>Brielle</li>
		<li id='22'>Carlos Baila</li>
		<li id='26'>Perice, Moja Merice</li>
		<li id='30'>Let's Ruin Julie's Birthday</li>
		<li id='34'>Hey Marlene</li>
		<li id='38'>Jan Klaassen was Trompetter</li>
		<li id='42'>Nick The Chopper</li>
		<li id='46'>Weird About Rob</li>
		<li id='50'>C.S. Lewis</li>
		<li id='54'>Valentino</li>
		<li id='58'>Marcia Baila</li>
		<li id='62'>Scotty doesn't know</li>
		<li id='66'>Vallerie</li>
  </ul>
</div>
<div id="targetItems">
  <ul id="orderList">
		<li>10</li>
		<li>9</li>
		<li>8</li>
		<li>7</li>
		<li>6</li>
		<li>5</li>
		<li>4</li>
		<li>3</li>
		<li>2</li>
		<li>1</li>
  </ul>
  <ul id="targetList" class="connected">
  </ul>
</div>
</body>
</html>
Οι επιλογές πηγαίνουν και κάθονται δίπλα στη λίστα 10,9,8,7,... (αυτή την έχω απλώς για να έχω κάποια αρίθμηση και να βλέπω τις θέσεις).

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Πρόβλημα με jquery και περιορισμό σε sortable lists

Δημοσίευση από fafos » 04 Ιαν 2011 18:34

mia xara einai kai etsi.. aplos an thes na glytoseis ligo kodika douleueis me thn cancel:

Κώδικας: Επιλογή όλων

<script>
	var allowedItems = 10;

	function check_allowed&#40;event,ui&#41;
	&#123;
		if &#40;$&#40;this&#41;.parent&#40;&#41;.attr&#40;'id'&#41; == 'targetItems'&#41;
		&#123;

if&#40; $&#40;this&#41;.children&#40;&#41;.length > allowedItems&#41; &#123;

$&#40; "#sourceList" &#41;.sortable&#40;'cancel'&#41;;

 &#125; else &#123;

$&#40; "#sourceList, #targetList" &#41;.sortable&#40; "option", "connectWith", '.connected' &#41;;
&#125;

		&#125;
	&#125;
	
	$&#40;
		function&#40;&#41;
		&#123;
			$&#40; "#sourceList, #targetList" &#41;
			.sortable
			&#40;
				&#123;
					cursor&#58; 'hand',
					connectWith&#58; '.connected',
					helper&#58; 'clone',
					placeholder&#58; "hover",
					receive&#58; check_allowed
				&#125;
			&#41;
		&#125;
	&#41;
	.disableSelection&#40;&#41;;

	</script>
sto demo "kopse" to koma apo thn receive: check_allowed giati oi palioi IE (ao 7 kai kato) to vlepoun san error..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

Πρόβλημα με jquery και περιορισμό σε sortable lists

Δημοσίευση από dva_dev » 04 Ιαν 2011 19:42

Ευχαριστώ.

Είχα δοκιμάσει την cancel στην αρχή, αλλά δημιουργεί ένα εφέ σαν undo. Δημιουργεί την επιπλέον θέση στη λίστα και μετά το παίρνει πίσω. Αυτό ήθελα να αποφύγω, να μην αφήνει καν να δημιουργηθεί αυτή η νέα θέση (και το undo).

Θέλει αρκετή δουλίτσα ακόμα, είναι μερικά πράγματα που θέλω να βάλω για να έχει κάποια ουσιαστική λειτουργία.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες