This project is read-only.

Cookies or something else

Sep 6, 2011 at 5:11 PM

I apologize for my English! But what interests me the opportunity to maintain position after sorting items! Here is the code!

 

<div class="list-wrap">

        		 <ul id="ukr">
<ul id="list1">
<li><div id="img">&nbsp;<a href="javascript:ajaxpage('ukr_djfm.html', 'player');">DJ FM</a></div></li>
<li><div id="img">&nbsp;<a href="javascript:ajaxpage('ukr_kissfm.html', 'player');">Kiss FM</a></div></li>
<li><div id="img">&nbsp;<a href="javascript:ajaxpage('ukr_roks.html', 'player');">Roks</a></div></li>
	</ul>
	<script type="text/javascript">
		$("#list1").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
		
		function saveOrder() {
			var data = $("#list1 li").map(function() { return $(this).children().html(); }).get();
			$("input[name=list1SortOrder]").val(data.join("|"));
		};
	</script>
	<div style="clear:both;"></div>
        		 </ul>
			
        		 <ul id="rus" class="hide">
<ul id="list2">
<li><div id="img">&nbsp;<a href="javascript:ajaxpage('rus_101clubdance.html', 'player');">101 Club Dance</a></div></li>
<li><div id="img">&nbsp;<a href="javascript:ajaxpage('rus_101diskoteka80.html', 'player');">101 80</a></div></li>
<li><div id="img">&nbsp;<a href="javascript:ajaxpage('rus_bestfm.html', 'player');">BestFM</a></div></li>
</ul>
	<script type="text/javascript">
		$("#list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
		
		function saveOrder() {
			var data = $("#list2 li").map(function() { return $(this).children().html(); }).get();
			$("input[name=list2SortOrder]").val(data.join("|"));
		};
	</script>
	<div style="clear:both;"></div>
        		 </ul>

        		 <ul id="myradio" class="hide">
<ul id="list3">
<li><div id="img">&nbsp;<a href="javascript:ajaxpage('mr_acidjazz.html', 'player');">Acid Jazz</a></div></li>
<li><div id="img">&nbsp;<a href="javascript:ajaxpage('mr_altrock.html', 'player');">Alternative Rock</a></div></li>
<li><div id="img">&nbsp;<a href="javascript:ajaxpage('mr_ballads.html', 'player');">Ballads</a></div></li>
</ul>
	<script type="text/javascript">
		$("#list3").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
		
		function saveOrder() {
			var data = $("#list3 li").map(function() { return $(this).children().html(); }).get();
			$("input[name=list3SortOrder]").val(data.join("|"));
		};
	</script>
	<div style="clear:both;"></div>
        		 </ul>
</div>

I have three tabs on JQuery. They are elements which I move, you need to move the following position memorized, I understand that you need to use cookies, but how to implement it, do not know yet. I hope for your help. Thanks in advance.

 

Sep 30, 2011 at 10:09 AM

What can make cookies easier to use is this plugin jquery.cookie.js here's an example:

<ul id="list1">
	<li id="DJFM"><div id="img">&nbsp;<a href="javascript:ajaxpage('ukr_djfm.html', 'player');">DJ FM</a></div></li>
	<li id="KissFM"><div id="img">&nbsp;<a href="javascript:ajaxpage('ukr_kissfm.html', 'player');">Kiss FM</a></div></li>
	<li id="Roks"><div id="img">&nbsp;<a href="javascript:ajaxpage('ukr_roks.html', 'player');">Roks</a></div></li>
</ul>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
	$("#list1").dragsort({ dragSelector: "div", dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
	
	function saveOrder() {
		var data = $("#list1 li").map(function() { return $(this).attr("id"); }).get();
		$.cookie('list1SortOrder', data.join("|"), { expires: 365 });
	};
	
	//restore order
	if ($.cookie('list1SortOrder') != null) {
		var itemsOrder = $.cookie('list1SortOrder').split("|");
		$(itemsOrder).each(function() { $("#" + this).appendTo("#list1") });
	}
</script>