Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] sortable
Forum PHP.pl > Forum > XML, AJAX
PiotrN
13.07.2010, 18:55:16
Mam taki skrypt: http://www.shopdev.co.uk/blog/sortable-lis...sing-jquery-ui/
Nie wiem jak zmienić ul i li na div. Próbowałem zmieniać ale nie działało. Proszę o pomoc.
Lars_18
13.07.2010, 20:27:59
A poprawnie nazywasz te divy? W ostateczności możesz to zrobić na liście nieuporządkowaniej odpowiednio stylując ją CSSem, oczywiście zależy co chcesz w niej umieścić. Zobacz tutaj: http://jqueryui.com/demos/sortable/
A po drugie - pokaż nam swój kod.
PiotrN
13.07.2010, 22:06:43 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jQuery UI Sortables</title>
  6. <style> 
  7. div {
  8. 	border:1px solid #DADADA;
  9. 	background-color:#EFEFEF;
  10. 	padding:3px 5px;
  11. 	margin-bottom:3px;
  12. 	margin-top:3px;
  13.  
  14. 	list-style-type:circle;
  15. 	font-family:Arial, Helvetica, sans-serif;
  16. 	color:#666666;
  17. 	font-size:0.8em;
  18. }
  19.  
  20. div:hover {
  21. 	background-color:#FFF;
  22. 	cursor:move;
  23. }
  24. </style>
  25. <script src="/js/jquery-1.2.6.min.js" type="text/javascript"></script>
  26. <script src="/js/jquery-ui-1.5.1.packed.js" type="text/javascript"></script>
  27. <script src="/js/jquery.cookie.js" type="text/javascript"></script>
  28. <script type="text/javascript"> 
  29. /////////////////////////////////////////////////////////////////
  30. /////  EDIT THE FOLLOWING VARIABLE VALUES  //////////////////////
  31. /////////////////////////////////////////////////////////////////
  32.  
  33. // set the list selector
  34. var setSelector = "#list1";
  35. // set the cookie name
  36. var setCookieName = "listOrder";
  37. // set the cookie expiry time (days):
  38. var setCookieExpiry = 7;
  39.  
  40. /////////////////////////////////////////////////////////////////
  41. /////  YOU PROBABLY WON'T NEED TO EDIT BELOW  ///////////////////
  42. /////////////////////////////////////////////////////////////////
  43.  
  44. // function that writes the list order to a cookie
  45. function getOrder() {
  46. 	// save custom order to cookie
  47. 	$.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });
  48. }
  49.  
  50. // function that restores the list order from a cookie
  51. function restoreOrder() {
  52. 	var list = $(setSelector);
  53. 	if (list == null) return
  54.  
  55. 	// fetch the cookie value (saved order)
  56. 	var cookie = $.cookie(setCookieName);
  57. 	if (!cookie) return;
  58.  
  59. 	// make array from saved order
  60. 	var IDs = cookie.split(",");
  61.  
  62. 	// fetch current order
  63. 	var items = list.sortable("toArray");
  64.  
  65. 	// make array from current order
  66. 	var rebuild = new Array();
  67. 	for ( var v=0, len=items.length; v<len; v++ ){
  68. 		rebuild[items[v]] = items[v];
  69. 	}
  70.  
  71. 	for (var i = 0, n = IDs.length; i < n; i++) {
  72.  
  73. 		// item id from saved order
  74. 		var itemID = IDs[i];
  75.  
  76. 		if (itemID in rebuild) {
  77.  
  78. 			// select item id from current order
  79. 			var item = rebuild[itemID];
  80.  
  81. 			// select the item according to current order
  82. 			var child = $("div.ui-sortable").children("#" + item);
  83.  
  84. 			// select the item according to the saved order
  85. 			var savedOrd = $("div.ui-sortable").children("#" + itemID);
  86.  
  87. 			// remove all the items
  88. 			child.remove();
  89.  
  90. 			// add the items in turn according to saved order
  91. 			// we need to filter here since the "ui-sortable"
  92. 			// class is applied to all ul elements and we
  93. 			// only want the very first!  You can modify this
  94. 			// to support multiple lists - not tested!
  95. 			$("div.ui-sortable").filter(":first").append(savedOrd);
  96. 		}
  97. 	}
  98. }
  99.  
  100. // code executed when the document loads
  101. $(function() {
  102. 	// here, we allow the user to sort the items
  103. 	$(setSelector).sortable({
  104. 		axis: "y",
  105. 		cursor: "move",
  106. 		update: function() { getOrder(); }
  107. 	});
  108.  
  109. 	// here, we reload the saved order
  110. 	restoreOrder();
  111. });
  112. </script>
  113. </head>
  114.  
  115. <body>
  116.  
  117.  
  118. <div class="list">
  119.    <div id="item-1">1</div>
  120.    <div id="item-2">2</div>
  121.    <div id="item-3">3</div>
  122.    <div id="item-4">4</div>
  123.    <div id="item-5">5</div>
  124.    <div id="item-6">6</div>
  125. </div>
  126. </body>
  127. </html>
[HTML] pobierz, plaintext
fleshgrinder
14.07.2010, 01:59:10
var setSelector = "#list1";

<div class="list">
PiotrN
3.08.2010, 17:55:59
Próbowałem do powyższego kodu dadać funkcje helper, ale nic z tego nie wyszło.
Chodzi mi o to, aby pojawiały się takie "podpowiedzi" - boxy z przerywaną linią, gdy zmienia się kolejność.
http://jqueryui.com/demos/sortable/#option-helper

Jestem początkujący w jQuery, póki co korzystam z slide i sortable i mam takie pytanie:
Czy poniżej zamieszczonych plików nie można zmienić na jakiś wspólny, czy np. jak użyje tego 1.2.6 do obu funkcji to będzie działać?
jquery-1.2.3.min.js
jquery-1.2.6.min.js

Bardzo proszę o pomoc.
everth
3.08.2010, 18:54:07
Czy tobie czasem nie chodzi o coś takiego? Co do bibliotek - zazwyczaj pluginy dobiera się pod biblioteki a nie odwrotnie. Stabilną wersją Jquery na dziś jet 1.4.2 i zaleca się używać najnowszych stabilnych wersji. Odpowiadająca mu Jquery UI to 1.8.2 Zaktualizuj sobie te biblioteki. A @fleshgrinder ma rację, nie "<div class="list">", tylko jeśli już to "<div id='list'>".
PiotrN
4.08.2010, 16:35:53
tak, o to mi chodziło. Jak dodać tą funkcję do kodu zamieszczonego powyżej.
Proszę o pomoc, albo o jakąś alternatywę z ciaseczkami.

Już sobie poradziłem z placeholder, tylko mam problem z css.



[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jQuery UI Sortables</title>
  6. <style> 
  7. div#list {
  8. 	border:1px solid #DADADA;
  9. 	background-color:#EFEFEF;
  10. 	padding:3px 5px;
  11. 	margin-bottom:3px;
  12. 	margin-top:3px;
  13.  
  14. 	list-style-type:circle;
  15. 	font-family:Arial, Helvetica, sans-serif;
  16. 	color:#000000;
  17. 	font-size:0.8em;
  18. }
  19.  
  20. div:hover {
  21. 	background-color:#FFF;
  22. 	cursor:move;
  23. }
  24.  
  25. .sortHelper {
  26. 	border: 2px dotted #666;
  27.                 margin: 2px 0px 2px 0px;
  28. 	padding-bottom:0px;
  29. 	padding-top:0px;
  30.                 background-color: #ffffff;
  31.                 width: auto !important;
  32. }
  33.  
  34. </style>
  35. <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
  36. <script src="/js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
  37. <script src="/js/jquery.cookie.js" type="text/javascript"></script>
  38. <script type="text/javascript"> 
  39. /////////////////////////////////////////////////////////////////
  40. /////  EDIT THE FOLLOWING VARIABLE VALUES  //////////////////////
  41. /////////////////////////////////////////////////////////////////
  42.  
  43. // set the list selector
  44. var setSelector = "#list";
  45. // set the cookie name
  46. var setCookieName = "listOrder";
  47. // set the cookie expiry time (days):
  48. var setCookieExpiry = 7;
  49.  
  50. /////////////////////////////////////////////////////////////////
  51. /////  YOU PROBABLY WON'T NEED TO EDIT BELOW  ///////////////////
  52. /////////////////////////////////////////////////////////////////
  53.  
  54. //getter
  55. var placeholder = $( ".sortHelper" ).sortable( "option", "placeholder" );
  56. //setter
  57. $( ".sortHelper" ).sortable( "option", "placeholder", 'ui-state-highlight' );
  58.  
  59. // function that writes the list order to a cookie
  60. function getOrder() {
  61. 	// save custom order to cookie
  62. 	$.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });
  63. }
  64.  
  65. // function that restores the list order from a cookie
  66. function restoreOrder() {
  67. 	var list = $(setSelector);
  68. 	if (list == null) return
  69.  
  70. 	// fetch the cookie value (saved order)
  71. 	var cookie = $.cookie(setCookieName);
  72. 	if (!cookie) return;
  73.  
  74. 	// make array from saved order
  75. 	var IDs = cookie.split(",");
  76.  
  77. 	// fetch current order
  78. 	var items = list.sortable("toArray");
  79.  
  80. 	// make array from current order
  81. 	var rebuild = new Array();
  82. 	for ( var v=0, len=items.length; v<len; v++ ){
  83. 		rebuild[items[v]] = items[v];
  84. 	}
  85.  
  86. 	for (var i = 0, n = IDs.length; i < n; i++) {
  87.  
  88. 		// item id from saved order
  89. 		var itemID = IDs[i];
  90.  
  91. 		if (itemID in rebuild) {
  92.  
  93. 			// select item id from current order
  94. 			var item = rebuild[itemID];
  95.  
  96. 			// select the item according to current order
  97. 			var child = $("div.ui-sortable").children("#" + item);
  98.  
  99. 			// select the item according to the saved order
  100. 			var savedOrd = $("div.ui-sortable").children("#" + itemID);
  101.  
  102. 			// remove all the items
  103. 			child.remove();
  104.  
  105. 			// add the items in turn according to saved order
  106. 			// we need to filter here since the "ui-sortable"
  107. 			// class is applied to all ul elements and we
  108. 			// only want the very first!  You can modify this
  109. 			// to support multiple lists - not tested!
  110. 			$("div.ui-sortable").filter(":first").append(savedOrd);
  111. 		}
  112. 	}
  113. }
  114.  
  115. // code executed when the document loads
  116. $(function() {
  117. 	// here, we allow the user to sort the items
  118.  
  119. 	$(setSelector).sortable({
  120. 		axis: "y",
  121. 		cursor: "move",
  122.                                 placeholder: "sortHelper",
  123.                                 update: function() { getOrder(); }
  124. 	});
  125.  
  126. 	// here, we reload the saved order
  127. 	restoreOrder();
  128. });
  129. </script>
  130. </head>
  131.  
  132. <body>
  133. <div id="list">
  134.     <div id="item-1">List Item 1</div>
  135.     <div id="item-2">List Item 2</div>
  136.     <div id="item-3">List Item 3</div>
  137.     <div id="item-4">List Item 4</div>
  138.     <div id="item-5">List Item 5</div>
  139.     <div id="item-6">List Item 6</div>
  140. </div>
  141. </body>
  142. </html>
[HTML] pobierz, plaintext


Co zrobić aby placeholder był pod całym tym boksem - List item-1 itd ? Niezależnie ile tekstu jest w tym boxie, bo przy jednej "linii" tekstu to wiem że wtedy wystarczą height albo padding w sortHelper.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.