...

View Full Version : Sortable divs with cookies?



webdevised
09-24-2008, 09:00 PM
I have a sortable div page http://bt5.awardspace.com and the sortable works just fine.. I can move the divs around and set the cookie.. I can also read the cookie.


http://bt5.awardspace.com/index.html (http://bt5.awardspace.com/interface.js)

http://bt5.awardspace.com/jquery-1.2.6.min.js (http://bt5.awardspace.com/interface.js)

http://bt5.awardspace.com/interface.js

If you go to my example site and then reorder the divs and then refresh the page you will see the cookie string at the bottom.. but the divs return back to their orginal order.

Example cookie string:
sort1[]-links&sort1[]-slide&sort1[]-biz&sort2[]-shop&sort3[]-local&sort3[]-images&sort3[]-feeds&sort3[]-news

the issue is that i cant read the cookie and then change the content to what the user set it as.. i am trying to do what they do at bbc.co.uk (http://www.bbc.co.uk)

I found this script that randomly reorders divs. anyone have any ideas how i can use the below script to read the cookie i set up and cange it

http://www.javascriptkit.com/script/script2/imageorder.shtml (http://www.javascriptkit.com/script/script2/imageorder.shtml)

I can't find the answer anywhere.. PLEASE HELP...

Note: this has to be done by js not a server side script. I am using a framework called Django no server side scripts can be run cause it uses a template system..

webdevised
09-25-2008, 02:47 PM
Bump bump

vwphillips
09-25-2008, 07:39 PM
with a crude drag &drop


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8" />
<title>Sortables demo - Interface plugin for jQuery</title>

<!-- CSS HIDE SUM -->
<style type="text/css">
.sum{
display:none;
}
</style>

<!-- JS HIDE ME SUM -->
<script type="text/javascript">
document.write("<style type=\"text/css\">.newshideMe, .feedshideMe {display:none;} .sum{display:block;}</style>");
</script>

<!-- CSS -->
<style type="text/css" media="all">
html
{
height: 100%;
}
img{
border: none;
}
body
{
background: #fff;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.groupWrapper
{
position:relative;
width: 32%;
float: left;
margin-right: 1%;
min-height: 400px;
}
.serializer
{
clear: both;
}
.groupItem
{
position:relative;
margin-bottom: 20px;
background-color:#FFFFFF;
border:1px solid #666666;
}
.groupItem .itemHeader
{
line-height: 28px;
background-color: #cccccc;
border-top: 2px solid #666666;
color: #000;
padding: 0 10px;
cursor: move;
font-weight: bold;
font-size: 16px;
height: 28px;
position: relative;
}

.sortHelper
{
border: 3px dashed #666;
width: auto !important;
}
.groupWrapper p
{
height: 1px;
margin: 0;
padding: 0;
}

</style>


<!-- Cookie and ready -->
<script type="text/javascript">




function serialize(s)
{

};


/* COOKIES */



</script>

<!-- Restore order -->
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function zxcEventAdd(zxco,zxct,zxcf,zxcp) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ return zxco[zxcf](e,zxcp);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ return zxco[zxcf](e,zxcp); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e,zxcp); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddEvt(zxcobj,zxcfun,zxcevt,zxcp){
if (zxcobj['zxcadd'+zxcfun+zxcevt]) return;
zxcobj['zxcadd'+zxcfun+zxcevt]=window[zxcfun];
zxcEventAdd(zxcobj,zxcevt,'zxcadd'+zxcfun+zxcevt,zxcp);
}

function zxcElsByClass(zxccls,zxcp,zxctag) {
zxcp=zxcp||document;
zxcp=typeof(zxcp)=='object'?zxcp:document.getElementById(zxcp);
zxctag=zxctag||'*';
for (var zxcels=zxcp.getElementsByTagName(zxctag),zxcreg=new RegExp('\\b'+zxccls+'\\b'),zxcary=[],zxc0=0;zxc0<zxcels.length;zxc0++){
if (zxcreg.test(zxcels[zxc0].className)) zxcary.push(zxcels[zxc0]);
}
return zxcary;
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}

function zxcMse(zxcevt){
if (document.all) return [zxcevt.clientX,zxcevt.clientY];
return [zxcevt.pageX,zxcevt.pageY];
}


function zxcDragInit(zxcevt,zxccls){
var zxcary=zxcElsByClass(zxccls[0],false,'DIV');
for (var zxcnu=0,zxcdivs,zxcdivary=[],zxcparary=zxcElsByClass(zxccls[0],false,'DIV'),zxctitle,zxc0=0;zxc0<zxcparary.length;zxc0++){
zxcdivs=zxcElsByClass(zxccls[1],zxcparary[zxc0],'DIV');
for (var zxc0a=0;zxc0a<zxcdivs.length;zxc0a++){
zxcdivary.push(zxcdivs[zxc0a]);
zxcdivs[zxc0a].nu=(zxcnu++)+'';
}
}
if (zxcReadCookie('zxcnme')){
var zxccookievalue=zxcReadCookie('zxcnme');
zxccookievalue=zxccookievalue.split(';')
for (var zxcp,zxcs,zxc1=0;zxc1<zxccookievalue.length;zxc1++){
zxcs=zxccookievalue[zxc1].split(':');
zxcp=zxcparary[zxcs[0]];
for (var zxc1a=1;zxc1a<zxcs.length;zxc1a++){
zxcp.appendChild(zxcdivary[zxcs[zxc1a]]);
}
}
}

for (var zxcpary=[],zxcary=zxcElsByClass(zxccls[1]),zxctitle,zxc0=0;zxc0<zxcary.length;zxc0++){
zxctitle=zxcElsByClass(zxccls[2],zxcary[zxc0],'DIV');
if (zxctitle.length>0){
zxcpary.push(zxcary[zxc0]);
zxctitle[0].drag=zxcES(zxcary[zxc0].cloneNode(true),{position:'absolute',visibility:'hidden',zIndex:'101',left:'0px',top:'5px',width:zx cary[zxc0].offsetWidth+'px'},document.getElementsByTagName('BODY')[0]);
zxctitle[0].drag.divary=zxcdivary;
zxctitle[0].drag.parary=zxcparary;
zxctitle[0].drag.obj=zxcary[zxc0];
zxcAddEvt(zxctitle[0],'zxcMseDown','mousedown');
}
}
}

var zxcDragObj=false;

function zxcMseDown(zxcevt){
var zxcp=this.parentNode;
zxcDragObj=[this.drag,zxcPos(zxcp)[0],zxcPos(zxcp)[1],zxcMse(zxcevt)];
zxcES(this.drag,{visibility:'visible',left:zxcPos(zxcp)[0]+'px',top:zxcPos(zxcp)[1]+'px'});
return false;
}

function zxcDrag(zxcevt){
if (zxcDragObj){
var zxcmse=zxcMse(zxcevt);
zxcES(zxcDragObj[0],{left:zxcDragObj[1]-(zxcDragObj[3][0]-zxcmse[0])+'px',top:zxcDragObj[2]-(zxcDragObj[3][1]-zxcmse[1])+'px'});
}
}
function zxcMseUp(){
if (!zxcDragObj) return;
var zxcdpos=zxcPos(zxcDragObj[0]);
var zxcary=zxcDragObj[0].parary;
for (var zxc0=0;zxc0<zxcary.length;zxc0++){
var zxcpos=zxcPos(zxcary[zxc0]);
if (zxcdpos[0]>zxcPos(zxcary[zxc0])[0]&&zxcdpos[0]<zxcPos(zxcary[zxc0])[0]+zxcary[zxc0].offsetWidth){
zxcary[zxc0].appendChild(zxcDragObj[0].obj);
}
}
var zxcstring='';
for (var zxc1=0;zxc1<zxcary.length;zxc1++){
zxcary[zxc1].ary1=[]
var zxcdivs=zxcDragObj[0].divary;
for (var zxccnt=1,zxc1a=0;zxc1a<zxcdivs.length;zxc1a++){
if (zxcdivs[zxc1a].parentNode==zxcary[zxc1]){
zxcary[zxc1].ary1.push(zxc1a)
}
}
}
var zxcstring='';
for (var zxc1=0;zxc1<zxcary.length;zxc1++){
zxcstring+=zxc1+':'+zxcary[zxc1].ary1.join(':')+';';
}
zxcCreateCookie('zxcnme',zxcstring,1)
zxcES(zxcDragObj[0],{visibility:'hidden'});
zxcDragObj=false;
}

zxcAddEvt(window,'zxcDragInit','load',['groupWrapper','groupItem','itemHeader']);
zxcAddEvt(document,'zxcMseUp','mouseup');
zxcAddEvt(document,'zxcDrag','mousemove');
// zxcAddOOPEvt(zxcobj,'mouseover',this.preview,this)

function zxcCreateCookie(zxcnme,zxcv,zxcdays){
document.cookie=zxcnme+'='+zxcv+';expires='+new Date(new Date().getTime()+zxcdays*86400000).toGMTString();+';path=/';
}

function zxcReadCookie(zxcnme){
zxcnme+='=';
var zxcsplit = document.cookie.split(';');
for(var zxc0=0;zxc0<zxcsplit.length;zxc0++) {
var zxcs=zxcsplit[zxc0];
while (zxcs.charAt(0)==' ') zxcs=zxcs.substring(1,zxcs.length);
if (zxcs.indexOf(zxcnme)==0) return zxcs.substring(zxcnme.length,zxcs.length);
}
return null;
}


/*]]>*/
</script>
</head>
<body>






<div id="sort1" class="groupWrapper">
<div id="feeds" class="groupItem">
<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000); return false;"><a href="google.com">Feeds</a> </div>

<div class="itemContent">
<div class="sum" style="width:100px;"><a href="#" id="feedshide" style="display:none;" onClick="hideByClass('feedshideMe'); document.getElementById('feedshide').style.display='none'; document.getElementById('feedsshow').style.display='block';" >Hide Summaries</a><a href="#" id="feedsshow" onClick="showByClass('feedshideMe'); document.getElementById('feedsshow').style.display='none'; document.getElementById('feedshide').style.display='block';" >Show Summaries</a>
</div>
<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />

<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
</div>
</div>

<div id="news" class="groupItem">
<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000); return false;">News</div>

<div class="itemContent">
<div class="sum"><a href="#" id="newsshide" style="display:none;" onClick="hideByClass('newshideMe'); document.getElementById('newsshide').style.display='none'; document.getElementById('newsshow').style.display='block';" >Hide Summaries</a><a href="#" id="newsshow" onClick="showByClass('newshideMe'); document.getElementById('newsshow').style.display='none'; document.getElementById('newsshide').style.display='block';" >Show Summaries</a>
</div>
<strong>Test Headline</strong>
<p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />

<strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
</div>
</div>

</div>








<div id="sort2" class="groupWrapper">
<div id="shop" class="groupItem">
<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000); return false;">Shopping</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>

<div id="links" class="groupItem">

<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000); return false;">Links</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

</ul>
</div>
</div>

<div id="images" class="groupItem">
<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000); return false;">Images</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>

</div>










<div id="sort3" class="groupWrapper">
<div id="local" class="groupItem">
<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000); return false;">Local</div>
<div class="itemContent">

<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>

</div>

<div id="biz" class="groupItem">
<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000); return false;">Biz</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>

<div id="slide" class="groupItem">
<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000); return false;">Slideshows</div>

<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>

</div>
</div>

</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />


</body>
</html>

webdevised
09-29-2008, 06:36 PM
Thanks vwphillips i will take a look at it and see what i can do.. your the first that has come up with something...

webdevised
09-29-2008, 06:54 PM
I looked at the code.. how are you doing the reordering from the cookie??

vwphillips
09-29-2008, 07:38 PM
with ammentments and notes


function zxcDragInit(zxcevt,zxccls){
var zxcary=zxcElsByClass(zxccls[0],false,'DIV');
for (var zxcnu=0,zxcdivs,zxcdivary=[],zxcparary=zxcElsByClass(zxccls[0],false,'DIV'),zxctitle,zxc0=0;zxc0<zxcparary.length;zxc0++){
zxcdivs=zxcElsByClass(zxccls[1],zxcparary[zxc0],'DIV');
for (var zxc0a=0;zxc0a<zxcdivs.length;zxc0a++){
zxcdivary.push(zxcdivs[zxc0a]); // here we create an array of divs
zxcdivs[zxc0a].nu=(zxcnu++)+''; // here we give each div a sequential number
}
}
if (zxcReadCookie('zxcnme')){
var zxccookievalue=zxcReadCookie('zxcnme');

alert(zxccookievalue)
zxccookievalue=zxccookievalue.split('#')
for (var zxcp,zxcs,zxc1=0;zxc1<zxccookievalue.length-1;zxc1++){
zxcs=zxccookievalue[zxc1].split(':');
alert(zxcs); // field 0 = the parent number, subsequent fields the div nu
zxcp=zxcparary[zxcs[0]];
for (var zxc1a=1;zxc1a<zxcs.length;zxc1a++){
zxcp.appendChild(zxcdivary[zxcs[zxc1a]]);
}
}
}
..........



function zxcMseUp(){
if (!zxcDragObj) return;
var zxcdpos=zxcPos(zxcDragObj[0]);
var zxcary=zxcDragObj[0].parary;
for (var zxc0=0;zxc0<zxcary.length;zxc0++){
var zxcpos=zxcPos(zxcary[zxc0]);
if (zxcdpos[0]>zxcPos(zxcary[zxc0])[0]&&zxcdpos[0]<zxcPos(zxcary[zxc0])[0]+zxcary[zxc0].offsetWidth){
zxcary[zxc0].appendChild(zxcDragObj[0].obj);
}
}
var zxcstring='';
for (var zxc1=0;zxc1<zxcary.length;zxc1++){ // an array of parent nodes
zxcary[zxc1].ary1=[]
var zxcdivs=zxcDragObj[0].divary; // an array of dragable divs
for (var zxccnt=1,zxc1a=0;zxc1a<zxcdivs.length;zxc1a++){
if (zxcdivs[zxc1a].parentNode==zxcary[zxc1]){
zxcary[zxc1].ary1.push(zxcdivs[zxc1a].nu);
}
}
}
var zxcstring='';
for (var zxc1=0;zxc1<zxcary.length;zxc1++){
zxcstring+=zxc1+':'+zxcary[zxc1].ary1.join(':')+'#';
}
zxcCreateCookie('zxcnme',zxcstring,1)
zxcES(zxcDragObj[0],{visibility:'hidden'});
zxcDragObj=false;
}

webdevised
09-30-2008, 03:18 PM
how are the divs labeled in the cookie.. example: 0:0:1:2:4:5:6:1

vwphillips
09-30-2008, 06:04 PM
the cookie value is 0:1:7#1:0#2:3:4:5:6:2
split('#')[0] =0:1:2
split('#')[0].split(':')[0]= 0 = first wrapper
split('#')[0].split(':')[1] = 1= div.nu
split('#')[0].split(':')[2] = 7= div.nu

try


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8" />
<title>Sortables demo - Interface plugin for jQuery</title>

<!-- CSS HIDE SUM -->
<style type="text/css">
.sum{
display:none;
}
</style>

<!-- JS HIDE ME SUM -->
<script type="text/javascript">
document.write("<style type=\"text/css\">.newshideMe, .feedshideMe {display:none;} .sum{display:block;}</style>");
</script>

<!-- CSS -->
<style type="text/css" media="all">
html
{
height: 100%;
}
img{
border: none;
}
body
{
background: #fff;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.groupWrapper
{
position:relative;
width: 32%;
float: left;
margin-right: 1%;
min-height: 400px;
}
.serializer
{
clear: both;
}
.groupItem
{
position:relative;
margin-bottom: 20px;
background-color:#FFFFFF;
border:1px solid #666666;
}
.groupItem2
{
position:relative;
margin-bottom: 20px;
background-color:#FFFFFF;
border:1px solid #666666;
}
.groupItem .itemHeader
{
line-height: 28px;
background-color: #cccccc;
border-top: 2px solid #666666;
color: #000;
padding: 0 10px;
cursor: move;
font-weight: bold;
font-size: 16px;
height: 28px;
position: relative;
}

.sortHelper
{
border: 3px dashed #666;
width: auto !important;
}
.groupWrapper p
{
height: 1px;
margin: 0;
padding: 0;
}

</style>



<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Drag & Drop with persistance (30-Sep-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk/

var zxcDragObj=false;

function zxcDragInit(zxcevt,zxccls){
var zxcparary=zxcElsByClass(zxccls[0],false,'DIV');
for (var zxcnu=0,zxcdivs,zxcdivary=[],zxcparary=zxcElsByClass(zxccls[0],false,'DIV'),zxctitle,zxc0=0;zxc0<zxcparary.length;zxc0++){
zxcdivs=zxcElsByClass(zxccls[1],zxcparary[zxc0],'DIV');
for (var zxc0a=0;zxc0a<zxcdivs.length;zxc0a++){
zxcdivary.push(zxcdivs[zxc0a]);
zxcdivs[zxc0a].nu=(zxcnu++)+'';
}
}
if (zxcReadCookie(zxccls[0])){
var zxccookievalue=zxcReadCookie(zxccls[0]);
zxccookievalue=zxccookievalue.split('#')
for (var zxcp,zxcs,zxc1=0;zxc1<zxccookievalue.length-1;zxc1++){
zxcs=zxccookievalue[zxc1].split(':');
zxcp=zxcparary[zxcs[0]];
for (var zxc1a=1;zxc1a<zxcs.length-1;zxc1a++){
zxcp.appendChild(zxcdivary[zxcs[zxc1a]]);
}
}
}
var zxcmark=zxcES('DIV',{position:'absolute',overflow:'hidden',overflow:'hidden',left:'0px',top:'0px',wi dth:'0px',height:'0px'});
var zxcblank=zxcES('DIV',{position:'relative'});
zxcblank.className=zxccls[1]
for (var zxcpary=[],zxcary=zxcElsByClass(zxccls[1]),zxctitle,zxc0=0;zxc0<zxcary.length;zxc0++){
var zxctitle=zxcElsByClass(zxccls[2],zxcary[zxc0],'DIV');
if (zxctitle.length>0){
zxcpary.push(zxcary[zxc0]);
zxctitle[0].drag=zxcES(zxcary[zxc0].cloneNode(true),{position:'absolute',visibility:'hidden',zIndex:'101',left:'0px',top:'5px',width:zx cary[zxc0].offsetWidth+'px'},document.getElementsByTagName('BODY')[0]);
zxctitle[0].drag.divary=zxcdivary;
zxctitle[0].drag.parary=zxcparary;
zxctitle[0].drag.obj=zxcary[zxc0];
zxctitle[0].drag.blank=zxcblank;
zxcES(zxctitle[0].drag.blank,{width:zxcary[zxc0].offsetWidth+'px',height:zxcary[zxc0].offsetHeight+'px'});
zxctitle[0].drag.mark=zxcmark;
zxctitle[0].drag.nme=zxccls[0];
zxctitle[0].drag.cls=zxccls[1];
zxctitle[0].drag.days=zxccls[3];
zxcAddEvt(zxctitle[0],'zxcMseDown','mousedown');
}
}
}

function zxcMseDown(zxcevt){
var zxcp=this.drag.obj;
zxcp.parentNode.insertBefore(this.drag.mark,zxcp);
// 0 1 2 3 4 5 6
zxcDragObj=[this.drag,zxcPos(zxcp),zxcMse(zxcevt),zxcp,this.drag.mark,this.drag.blank,zxcLeftRight(this.drag.div ary,zxcPos(zxcp)[0])];
zxcES(this.drag,{visibility:'visible',left:zxcPos(zxcp)[0]+'px',top:zxcPos(zxcp)[1]+'px'});
return false;
}

function zxcDrag(zxcevt){
if (zxcDragObj){
var zxcmse=zxcMse(zxcevt);
zxcES(zxcDragObj[0],{left:zxcDragObj[1][0]-(zxcDragObj[2][0]-zxcmse[0])+'px',top:zxcDragObj[1][1]-(zxcDragObj[2][1]-zxcmse[1])+'px'});
zxcBlank(zxcDragObj);
}
}

function zxcBlank(zxcdrag){
if (zxcdrag[3].parentNode.nodeName=='DIV') zxcdrag[3].parentNode.removeChild(zxcDragObj[3]);
var zxcdpos=zxcPos(zxcdrag[0]);
var zxcary=zxcdrag[6];
var zxccol=zxcColum(zxcdrag[6],zxcdrag,zxcdpos).parentNode;
if (!zxccol) zxccol=zxcColum(zxcdrag[0].parary,zxcdrag,zxcdpos)||zxcdrag[4].parentNode;
var zxcary=zxcElsByClass(zxcdrag[0].cls,zxccol,'DIV');
for (var zxcset=false,zxc1=0;zxc1<zxcary.length;zxc1++){
var zxcpos=zxcPos(zxcary[zxc1])[1]+zxcary[zxc1].offsetHeight/2;
if (zxcpos>zxcdpos[1]){
zxccol.insertBefore(zxcdrag[5],zxcary[zxc1]);
zxcset=true;
break;
}
}
if (!zxcset) zxccol.appendChild(zxcdrag[5]);
}

function zxcMseUp(){
if (zxcDragObj){
zxcDragObj[5].parentNode.replaceChild(zxcDragObj[3],zxcDragObj[5]);
var zxcstring='';
var zxcary=zxcDragObj[0].parary;
for (var zxc1=0;zxc1<zxcary.length;zxc1++){
zxcstring+=zxc1+':';
var zxcdivs=zxcElsByClass('groupItem',zxcary[zxc1],'DIV');
for (var zxccnt=1,zxc1a=0;zxc1a<zxcdivs.length;zxc1a++) zxcstring+=zxcdivs[zxc1a].nu+':';
zxcstring+='#';
}
zxcDragObj[0].style.visibility='hidden';
zxcCreateCookie(zxcDragObj[0].nme,zxcstring,zxcDragObj[0].days);
zxcDragObj=false;
}
}

function zxcLeftRight(zxcary,zxcpp){
var zxclr=[[],[]];
for (var zxc0=0;zxc0<zxcary.length;zxc0++){
var zxcpos=zxcPos(zxcary[zxc0])[0];
if (zxcpos!=0&&zxcpos!=zxcpp){
zxclr[zxcpos<zxcpp?0:1].push(zxcary[zxc0]);
}
}
zxclr[1]=zxclr[1].reverse();
return zxclr[0].concat(zxclr[1]);
}

function zxcSortLeft(zxca,zxcb){
zxca=zxca.offsetLeft;
zxcb=zxcb.offsetLeft;
return zxca<zxcb?1:zxca>zxcb?-1:0;
}

function zxcColum(zxcary,zxcdrag,zxcdpos){
for (var zxc0=0;zxc0<zxcary.length;zxc0++){
var zxcpos=zxcPos(zxcary[zxc0])[0];
if ((zxcpos<zxcdrag[1][0]&&zxcdpos[0]<zxcpos+zxcary[zxc0].offsetWidth)||(zxcpos>zxcdrag[1][0]&&zxcdpos[0]+zxcdrag[0].offsetWidth>zxcpos)){
return zxcary[zxc0];
}
}
return false;
}

function zxcEventAdd(zxco,zxct,zxcf,zxcp) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ return zxco[zxcf](e,zxcp);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ return zxco[zxcf](e,zxcp); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e,zxcp); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddEvt(zxcobj,zxcfun,zxcevt,zxcp){
if (zxcobj['zxcadd'+zxcfun+zxcevt]) return;
zxcobj['zxcadd'+zxcfun+zxcevt]=window[zxcfun];
zxcEventAdd(zxcobj,zxcevt,'zxcadd'+zxcfun+zxcevt,zxcp);
}

function zxcElsByClass(zxccls,zxcp,zxctag) {
zxcp=zxcp||document;
zxcp=typeof(zxcp)=='object'?zxcp:document.getElementById(zxcp);
zxctag=zxctag||'*';
for (var zxcels=zxcp.getElementsByTagName(zxctag),zxcreg=new RegExp('\\b'+zxccls+'\\b'),zxcary=[],zxc0=0;zxc0<zxcels.length;zxc0++){
if (zxcreg.test(zxcels[zxc0].className)) zxcary.push(zxcels[zxc0]);
}
return zxcary;
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}

function zxcMse(zxcevt){
if (document.all) return [zxcevt.clientX,zxcevt.clientY];
return [zxcevt.pageX,zxcevt.pageY];
}

function zxcCreateCookie(zxcnme,zxcv,zxcdays){
document.cookie=zxcnme+'='+zxcv+';expires='+new Date(new Date().getTime()+zxcdays*86400000).toGMTString();+';path=/';
}

function zxcReadCookie(zxcnme){
zxcnme+='=';
var zxcsplit = document.cookie.split(';');
for(var zxc0=0;zxc0<zxcsplit.length;zxc0++) {
var zxcs=zxcsplit[zxc0];
while (zxcs.charAt(0)==' ') zxcs=zxcs.substring(1,zxcs.length);
if (zxcs.indexOf(zxcnme)==0) return zxcs.substring(zxcnme.length,zxcs.length);
}
return null;
}

zxcAddEvt(window,'zxcDragInit','load',['groupWrapper','groupItem','itemHeader',1]);
zxcAddEvt(document,'zxcMseUp','mouseup');
zxcAddEvt(document,'zxcDrag','mousemove');


/*]]>*/
</script>
</head>
<body>






<div id="sort1" class="groupWrapper">
<div id="feeds" class="groupItem">
<div class="itemHeader"><a href="google.com">Feeds</a> </div>

<div class="itemContent">
<div class="sum" style="width:100px;"><a href="#" id="feedshide" style="display:none;" onClick="hideByClass('feedshideMe'); document.getElementById('feedshide').style.display='none'; document.getElementById('feedsshow').style.display='block';" >Hide Summaries</a><a href="#" id="feedsshow" onClick="showByClass('feedshideMe'); document.getElementById('feedsshow').style.display='none'; document.getElementById('feedshide').style.display='block';" >Show Summaries</a>
</div>
<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />

<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
</div>
</div>
<div id="news" class="groupItem">
<div class="itemHeader" >News</div>

<div class="itemContent">
<div class="sum"><a href="#" id="newsshide" style="display:none;" onClick="hideByClass('newshideMe'); document.getElementById('newsshide').style.display='none'; document.getElementById('newsshow').style.display='block';" >Hide Summaries</a><a href="#" id="newsshow" onClick="showByClass('newshideMe'); document.getElementById('newsshow').style.display='none'; document.getElementById('newsshide').style.display='block';" >Show Summaries</a>
</div>
<strong>Test Headline</strong>
<p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />

<strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
</div>
</div>

</div>








<div id="sort2" class="groupWrapper">
<div id="shop" class="groupItem">
<div class="itemHeader" >Shopping</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>

<div id="links" class="groupItem">

<div class="itemHeader" >Links</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

</ul>
</div>
</div>

<div id="images" class="groupItem">
<div class="itemHeader" >Images</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>

</div>










<div id="sort3" class="groupWrapper">
<div id="local" class="groupItem">
<div class="itemHeader" >Local</div>
<div class="itemContent">

<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>

</div>

<div id="biz" class="groupItem">
<div class="itemHeader" >Biz</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>

<div id="slide" class="groupItem">
<div class="itemHeader" >Slideshows</div>

<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>

</div>
</div>

</div>
http://bt5.awardspace.com/

</body>
</html>

webdevised
10-01-2008, 04:33 PM
Can you do me one more favor.. can you take the drag and drop feautre out of your script.. still keep the read the cookie and reorder the div part just take out the drag and set cookie option.. please....

webdevised
10-01-2008, 06:40 PM
I GOT IT!!!!!!!! THANK YOU SO MUCH!!.. Please look on my site at

http://bt5.awardspace.com/

to see it work and to view the code... it uses the other drag and drop code but uses your reorder code.. if you see anything that you think needs to be changed to make it work better or faster please let me know!!!!


-WD

vwphillips
10-02-2008, 12:53 AM
function serialize(s)
{
var zxcstring='';
for (var zxcdivs,zxcparary=zxcElsByClass('groupWrapper',false,'DIV'),zxc0=0;zxc0<zxcparary.length;zxc0++){
zxcstring+=zxc0+':';
zxcdivs=zxcElsByClass('groupItem',zxcparary[zxc0],'DIV');
for (var zxc0a=0;zxc0a<zxcdivs.length;zxc0a++){
zxcstring+=zxcdivs[zxc0a].nu+':';
}
zxcstring+='#';
}

var now = new Date();
now.setTime(now.getTime() + 1000 * 60 * 60 * 24 * 365);


document.cookie = "groupWrapper="+ zxcstring +";expires=" + now;
};


I get an error in IE at line 233 works in MozFF

vwphillips
10-02-2008, 11:59 AM
this works in IE and MozFF with same functionality as your page


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8" />
<title>Sortables demo - Interface plugin for jQuery</title>

<!-- CSS HIDE SUM -->
<style type="text/css">
.sum{
display:none;
}
</style>

<!-- JS HIDE ME SUM -->
<script type="text/javascript">
document.write("<style type=\"text/css\">.newshideMe, .feedshideMe {display:none;} .sum{display:block;}</style>");
</script>

<!-- CSS -->
<style type="text/css" media="all">
html
{
height: 100%;
}
img{
border: none;
}
body
{
background: #fff;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.groupWrapper
{
position:relative;
width: 32%;
float: left;
margin-right: 1%;
min-height: 400px;
}
.serializer
{
clear: both;
}
.groupItem
{
position:relative;
margin-bottom: 20px;
background-color:#FFFFFF;
border:1px solid #666666;
}
.groupItem2
{
position:relative;
margin-bottom: 20px;
background-color:#FFFFFF;
border:1px solid #666666;
}
.groupItem .itemHeader
{
line-height: 28px;
background-color: #cccccc;
border-top: 2px solid #666666;
color: #000;
padding: 0 10px;
cursor: move;
font-weight: bold;
font-size: 16px;
height: 28px;
position: relative;
}

.sortHelper
{
border: 3px dashed #666;
width: auto !important;
}
.groupWrapper p
{
height: 1px;
margin: 0;
padding: 0;
}
.blank {
border:dashed red 3px;
margin-bottom: 20px;
}

</style>



<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Drag & Drop with persistance (30-Sep-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// Initialised by a <BODY> or window event call to function:
// zxcDragInit(['groupWrapper','groupItem',1,'itemHeader','blank']);
// where parameter 0 is an array
// field 0 = the class name of the draggable div's parent node class name (string)
// field 1 = the class name of the draggable div's class name (string)
// field 2 = the duration of the cookie persistance in days. (digits, for no cookie use -1)
// field 3 = (optional) the class name if the draggable div's title bar class name (string, default is the draggable div)
// field 4 = (optional) the class name if the draggable div's blank class name (string, default is the draggable div outline)

// Functional Code - No Need to change

var zxcDragObj=false;

function zxcDragInit(zxccls){
zxccls[2]=zxccls[2]||-1;
var zxcparary=zxcElsByClass(zxccls[0],false,'DIV');
for (var zxcnu=0,zxcdivs,zxcdivary=[],zxcparary=zxcElsByClass(zxccls[0],false,'DIV'),zxctitle,zxc0=0;zxc0<zxcparary.length;zxc0++){
zxcdivs=zxcElsByClass(zxccls[1],zxcparary[zxc0],'DIV');
for (var zxc0a=0;zxc0a<zxcdivs.length;zxc0a++){
zxcdivary.push(zxcdivs[zxc0a]);
zxcdivs[zxc0a].nu=(zxcnu++)+'';
}
}
if (zxcReadCookie(zxccls[0])){
var zxccookievalue=zxcReadCookie(zxccls[0]);
zxccookievalue=zxccookievalue.split('#')
for (var zxcp,zxcs,zxc1=0;zxc1<zxccookievalue.length-1;zxc1++){
zxcs=zxccookievalue[zxc1].split(':');
zxcp=zxcparary[zxcs[0]];
for (var zxc1a=1;zxc1a<zxcs.length-1;zxc1a++){
zxcp.appendChild(zxcdivary[zxcs[zxc1a]]);
}
}
}
var zxcmark=zxcES('DIV',{position:'absolute',overflow:'hidden',overflow:'hidden',left:'0px',top:'0px',wi dth:'0px',height:'0px'});
var zxcblank=zxcES('DIV',{position:'relative'});
zxcblank.className=zxccls[4]||zxccls[1];
for (var zxcpary=[],zxcary=zxcElsByClass(zxccls[1]),zxctitle,zxc0=0;zxc0<zxcary.length;zxc0++){
zxcpary.push(zxcary[zxc0]);
zxcary[zxc0].data=[zxcmark,zxcblank,zxcparary,zxccls];
var zxcdrag=zxcES(zxcary[zxc0].cloneNode(true),{position:'absolute',visibility:'hidden',zIndex:'101',left:'0px',top:'5px',width:zx cary[zxc0].offsetWidth+'px',height:zxcary[zxc0].offsetHeight+'px'},document.getElementsByTagName('BODY')[0]);
var zxcobj=zxcElsByClass(zxccls[3],zxcary[zxc0],'DIV')[0]||zxcary[zxc0];
zxcobj.drag=zxcdrag;
zxcobj.drag.obj=zxcary[zxc0];
zxcAddEvt(zxcobj,'zxcMseDown','mousedown');
}
}

function zxcMseDown(zxcevt){
var zxcp=this.drag.obj;
zxcES(zxcp.data[1],{width:zxcp.offsetWidth+'px',height:zxcp.offsetHeight+'px'});
zxcp.parentNode.insertBefore(zxcp.data[0],zxcp);
// 0 1 2 3 4 = mark 5 = blank 6 = parary 7 =cls
zxcDragObj=[this.drag,zxcPos(zxcp),zxcMse(zxcevt),zxcp,zxcp.data[0],zxcp.data[1],zxcp.data[2],zxcp.data[3]];
zxcES(this.drag,{visibility:'visible',left:zxcPos(zxcp)[0]+'px',top:zxcPos(zxcp)[1]+'px'});
return false;
}

function zxcDrag(zxcevt){
if (zxcDragObj){
var zxcdrag=zxcDragObj;
var zxcmse=zxcMse(zxcevt);
var zxcdpos=[zxcdrag[1][0]-(zxcdrag[2][0]-zxcmse[0]),zxcdrag[1][1]-(zxcdrag[2][1]-zxcmse[1])];
zxcES(zxcdrag[0],{left:zxcdpos[0]+'px',top:zxcdpos[1]+'px'});
zxcBlank(zxcdrag,zxcdpos);
if (zxcdrag[3].parentNode.nodeName=='DIV') zxcdrag[3].parentNode.removeChild(zxcdrag[3]);
}
return false;
}

function zxcBlank(zxcdrag,zxcdpos){
for (var zxcdc=zxcdpos[0]+zxcdrag[0].offsetWidth/2,zxcary=zxcdrag[6],zxcpc,zxcc=1000,zxcnu=-1,zxc0=0;zxc0<zxcary.length;zxc0++){
var zxcpc=Math.abs((zxcPos(zxcary[zxc0])[0]+zxcary[zxc0].offsetWidth/2)-zxcdc);
if (zxcpc<zxcc){ zxcc=zxcpc; zxcnu=zxc0; }
}
var zxccol=zxcary[zxcnu]||zxcdrag[4].parentNode;
zxcary=zxcElsByClass(zxcdrag[7][1],zxccol,'DIV');
for (var zxcset=false,zxc1=0;zxc1<zxcary.length;zxc1++){
zxcpc=zxcPos(zxcary[zxc1])[1]+zxcary[zxc1].offsetHeight/2;
if (zxcpc>zxcdpos[1]){
zxccol.insertBefore(zxcdrag[5],zxcary[zxc1]);
zxcset=true;
break;
}
}
if (!zxcset) zxccol.appendChild(zxcdrag[5]);
}

function zxcColum(zxcary,zxcdrag,zxcdx){
var zxcdc=zxcdx+zxcdrag[0].offsetWidth/2;
for (var zxcc=1000,zxcnu=-1,zxc0=0;zxc0<zxcary.length;zxc0++){
var zxcpos=Math.abs((zxcPos(zxcary[zxc0])[0]+zxcary[zxc0].offsetWidth/2)-zxcdc);
if (zxcpos<zxcc){
zxcc=zxcpos;
zxcnu=zxc0;
}
}
return zxcary[zxcnu];
for (var zxc1=0;zxc1<zxcary.length;zxc1++){
var zxcpos=zxcPos(zxcary[zxc1])[0];
if ((!zxcdrag[9]&&zxcdx>zxcpos&&zxcdx<zxcpos+zxcary[zxc1].offsetWidth)){
return zxcary[zxc1];
}
}
for (var zxc1=zxcary.length-1;zxc1>=0;zxc1--){
var zxcpos=zxcPos(zxcary[zxc1])[0];
if ((zxcdrag[9]&&zxcdx+zxcdrag[0].offsetWidth>zxcpos)) return zxcary[zxc1];
}
return false;
}

function zxcMseUp(){
if (zxcDragObj){
zxcDragObj[5].parentNode.replaceChild(zxcDragObj[3],zxcDragObj[5]);
var zxcstring='';
var zxcary=zxcDragObj[6];
for (var zxc1=0;zxc1<zxcary.length;zxc1++){
zxcstring+=zxc1+':';
var zxcdivs=zxcElsByClass(zxcDragObj[7][1],zxcary[zxc1],'DIV');
for (var zxc1a=0;zxc1a<zxcdivs.length;zxc1a++) zxcstring+=zxcdivs[zxc1a].nu+':';
zxcstring+='#';
}
zxcDragObj[0].style.visibility='hidden';
zxcCreateCookie(zxcDragObj[7][0],zxcstring,zxcDragObj[7][2]);
zxcDragObj=false;
}
}

function zxcElsByClass(zxccls,zxcp,zxctag) {
zxcp=zxcp||document;
zxcp=typeof(zxcp)=='object'?zxcp:document.getElementById(zxcp);
zxctag=zxctag||'*';
for (var zxcels=zxcp.getElementsByTagName(zxctag),zxcreg=new RegExp('\\b'+zxccls+'\\b'),zxcary=[],zxc0=0;zxc0<zxcels.length;zxc0++){
if (zxcreg.test(zxcels[zxc0].className)) zxcary.push(zxcels[zxc0]);
}
return zxcary;
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}


function zxcMse(zxcevt){
if (document.all) return [zxcevt.clientX,zxcevt.clientY];
return [zxcevt.pageX,zxcevt.pageY];
}

function zxcCreateCookie(zxcnme,zxcv,zxcdays){
document.cookie=zxcnme+'='+zxcv+';expires='+new Date(new Date().getTime()+zxcdays*86400000).toGMTString();+';path=/';
}

function zxcReadCookie(zxcnme){
zxcnme+='=';
var zxcsplit = document.cookie.split(';');
for(var zxc0=0;zxc0<zxcsplit.length;zxc0++) {
var zxcs=zxcsplit[zxc0];
while (zxcs.charAt(0)==' ') zxcs=zxcs.substring(1,zxcs.length);
if (zxcs.indexOf(zxcnme)==0) return zxcs.substring(zxcnme.length,zxcs.length);
}
return null;
}

function zxcEventAdd(zxco,zxct,zxcf,zxcp) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ return zxco[zxcf](e,zxcp);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ return zxco[zxcf](e,zxcp); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e,zxcp); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddEvt(zxcobj,zxcfun,zxcevt,zxcp){
if (zxcobj['zxcadd'+zxcfun+zxcevt]) return;
zxcobj['zxcadd'+zxcfun+zxcevt]=window[zxcfun];
zxcEventAdd(zxcobj,zxcevt,'zxcadd'+zxcfun+zxcevt,zxcp);
}

//zxcAddEvt(window,'zxcDragInit','load',['groupWrapper','groupItem','itemHeader',1,'blank']);
zxcAddEvt(document,'zxcMseUp','mouseup');
zxcAddEvt(document,'zxcDrag','mousemove');


/*]]>*/
</script>
</head>
<body onload="zxcDragInit(['groupWrapper','groupItem',1,'itemHeader','blank']);">

<div id="sort1" class="groupWrapper">
<div id="feeds" class="groupItem">
<div class="itemHeader"><a href="google.com">Feeds</a> </div>

<div class="itemContent">
<div class="sum" style="width:100px;"><a href="#" id="feedshide" style="display:none;" onClick="hideByClass('feedshideMe'); document.getElementById('feedshide').style.display='none'; document.getElementById('feedsshow').style.display='block';" >Hide Summaries</a><a href="#" id="feedsshow" onClick="showByClass('feedshideMe'); document.getElementById('feedsshow').style.display='none'; document.getElementById('feedshide').style.display='block';" >Show Summaries</a>
</div>
<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />

<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
</div>
</div>
<div id="news" class="groupItem">
<div class="itemHeader" >News</div>

<div class="itemContent">
<div class="sum"><a href="#" id="newsshide" style="display:none;" onClick="hideByClass('newshideMe'); document.getElementById('newsshide').style.display='none'; document.getElementById('newsshow').style.display='block';" >Hide Summaries</a><a href="#" id="newsshow" onClick="showByClass('newshideMe'); document.getElementById('newsshow').style.display='none'; document.getElementById('newsshide').style.display='block';" >Show Summaries</a>
</div>
<strong>Test Headline</strong>
<p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />

<strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
</div>
</div>

</div>








<div id="sort2" class="groupWrapper">
<div id="shop" class="groupItem">
<div class="itemHeader" >Shopping</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>

<div id="links" class="groupItem">

<div class="itemHeader" >Links</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

</ul>
</div>
</div>

<div id="images" class="groupItem">
<div class="itemHeader" >Images</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>

</div>










<div id="sort3" class="groupWrapper">
<div id="local" class="groupItem">
<div class="itemHeader" >Local</div>
<div class="itemContent">

<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>

</div>

<div id="biz" class="groupItem">
<div class="itemHeader" >Biz</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>

<div id="slide" class="groupItem">
<div class="itemHeader" >Slideshows</div>

<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>

</div>
</div>

</div>
http://bt5.awardspace.com/

</body>
</html>

webdevised
10-02-2008, 03:19 PM
Thanks again.. your a life saver.. couldnt have done it with out you.. at least now you can had a script to your library... LOL :thumbsup:

webdevised
10-02-2008, 06:27 PM
quick questions.. on your current code can you change the drag to click and hold to move instead of just click???

vwphillips
10-02-2008, 06:48 PM
change the drag to click and hold to move instead of just click???

Not shure I understand as a click will be seen as a mousedown and mouseup so all thats left is doubleclick.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8" />
<title>Sortables demo - Interface plugin for jQuery</title>

<!-- CSS HIDE SUM -->
<style type="text/css">
.sum{
display:none;
}
</style>

<!-- JS HIDE ME SUM -->
<script type="text/javascript">
document.write("<style type=\"text/css\">.newshideMe, .feedshideMe {display:none;} .sum{display:block;}</style>");
</script>

<!-- CSS -->
<style type="text/css" media="all">
html
{
height: 100%;
}
img{
border: none;
}
body
{
background: #fff;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.groupWrapper
{
position:relative;
width: 32%;
float: left;
margin-right: 1%;
min-height: 400px;
}
.serializer
{
clear: both;
}
.groupItem
{
position:relative;
margin-bottom: 20px;
background-color:#FFFFFF;
border:1px solid #666666;
}
.groupItem2
{
position:relative;
margin-bottom: 20px;
background-color:#FFFFFF;
border:1px solid #666666;
}
.groupItem .itemHeader
{
line-height: 28px;
background-color: #cccccc;
border-top: 2px solid #666666;
color: #000;
padding: 0 10px;
cursor: move;
font-weight: bold;
font-size: 16px;
height: 28px;
position: relative;
}

.sortHelper
{
border: 3px dashed #666;
width: auto !important;
}
.groupWrapper p
{
height: 1px;
margin: 0;
padding: 0;
}
.blank {
border:dashed red 3px;
margin-bottom: 20px;
}

</style>



<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Drag & Drop with persistance (30-Sep-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// Initialised by a <BODY> or window event call to function:
// zxcDragInit(['groupWrapper','groupItem',1,'itemHeader','blank']);
// where parameter 0 is an array
// field 0 = the class name of the draggable div's parent node class name (string)
// field 1 = the class name of the draggable div's class name (string)
// field 2 = the duration of the cookie persistance in days. (digits, for no cookie use -1)
// field 3 = (optional) the class name if the draggable div's title bar class name (string, default is the draggable div)
// field 4 = (optional) the class name if the draggable div's blank class name (string, default is the draggable div outline)

// Functional Code - No Need to change

var zxcDragObj=false;

function zxcDragInit(zxccls){
zxccls[2]=zxccls[2]||-1;
var zxcparary=zxcElsByClass(zxccls[0],false,'DIV');
for (var zxcnu=0,zxcdivs,zxcdivary=[],zxcparary=zxcElsByClass(zxccls[0],false,'DIV'),zxctitle,zxc0=0;zxc0<zxcparary.length;zxc0++){
zxcdivs=zxcElsByClass(zxccls[1],zxcparary[zxc0],'DIV');
for (var zxc0a=0;zxc0a<zxcdivs.length;zxc0a++){
zxcdivary.push(zxcdivs[zxc0a]);
zxcdivs[zxc0a].nu=(zxcnu++)+'';
}
}
if (zxcReadCookie(zxccls[0])){
var zxccookievalue=zxcReadCookie(zxccls[0]);
zxccookievalue=zxccookievalue.split('#')
for (var zxcp,zxcs,zxc1=0;zxc1<zxccookievalue.length-1;zxc1++){
zxcs=zxccookievalue[zxc1].split(':');
zxcp=zxcparary[zxcs[0]];
for (var zxc1a=1;zxc1a<zxcs.length-1;zxc1a++){
zxcp.appendChild(zxcdivary[zxcs[zxc1a]]);
}
}
}
var zxcmark=zxcES('DIV',{position:'absolute',overflow:'hidden',overflow:'hidden',left:'0px',top:'0px',wi dth:'0px',height:'0px'});
var zxcblank=zxcES('DIV',{position:'relative'});
zxcblank.className=zxccls[4]||zxccls[1];
for (var zxcpary=[],zxcary=zxcElsByClass(zxccls[1]),zxctitle,zxc0=0;zxc0<zxcary.length;zxc0++){
zxcpary.push(zxcary[zxc0]);
zxcary[zxc0].data=[zxcmark,zxcblank,zxcparary,zxccls];
var zxcdrag=zxcES(zxcary[zxc0].cloneNode(true),{position:'absolute',visibility:'hidden',zIndex:'101',left:'0px',top:'5px',width:zx cary[zxc0].offsetWidth+'px',height:zxcary[zxc0].offsetHeight+'px'},document.getElementsByTagName('BODY')[0]);
var zxcobj=zxcElsByClass(zxccls[3],zxcary[zxc0],'DIV')[0]||zxcary[zxc0];
zxcobj.drag=zxcdrag;
zxcobj.drag.obj=zxcary[zxc0];
zxcAddEvt(zxcobj,'zxcMseDown','click');
}
}

function zxcMseDown(zxcevt){
if (zxcDragObj) return;
var zxcp=this.drag.obj;
var zxcppos=zxcPos(zxcp);
zxcES(zxcp.data[1],{width:zxcp.offsetWidth+'px',height:zxcp.offsetHeight+'px'});
zxcp.parentNode.insertBefore(zxcp.data[0],zxcp);
zxcp.parentNode.replaceChild(zxcp.data[1],zxcp);
// 0 1 2 3 4 = mark 5 = blank 6 = parary 7 =cls
zxcDragObj=[this.drag,zxcppos,zxcMse(zxcevt),zxcp,zxcp.data[0],zxcp.data[1],zxcp.data[2],zxcp.data[3]];
zxcES(this.drag,{visibility:'visible',left:zxcppos[0]+'px',top:zxcppos[1]+'px'});

return false;
}

function zxcDrag(zxcevt){
if (zxcDragObj){
var zxcdrag=zxcDragObj;
var zxcmse=zxcMse(zxcevt);
var zxcdpos=[zxcdrag[1][0]-(zxcdrag[2][0]-zxcmse[0]),zxcdrag[1][1]-(zxcdrag[2][1]-zxcmse[1])];
zxcES(zxcdrag[0],{left:zxcdpos[0]+'px',top:zxcdpos[1]+'px'});
zxcBlank(zxcdrag,zxcdpos);
}
return false;
}

function zxcBlank(zxcdrag,zxcdpos){
for (var zxcdc=zxcdpos[0]+zxcdrag[0].offsetWidth/2,zxcary=zxcdrag[6],zxcpc,zxcc=1000,zxcnu=-1,zxc0=0;zxc0<zxcary.length;zxc0++){
var zxcpc=Math.abs((zxcPos(zxcary[zxc0])[0]+zxcary[zxc0].offsetWidth/2)-zxcdc);
if (zxcpc<zxcc){ zxcc=zxcpc; zxcnu=zxc0; }
}
var zxccol=zxcary[zxcnu]||zxcdrag[4].parentNode;
zxcary=zxcElsByClass(zxcdrag[7][1],zxccol,'DIV');
for (var zxcset=false,zxc1=0;zxc1<zxcary.length;zxc1++){
zxcpc=zxcPos(zxcary[zxc1])[1]+zxcary[zxc1].offsetHeight/2;
if (zxcpc>zxcdpos[1]){
zxccol.insertBefore(zxcdrag[5],zxcary[zxc1]);
zxcset=true;
break;
}
}
if (!zxcset) zxccol.appendChild(zxcdrag[5]);
}

function zxcColum(zxcary,zxcdrag,zxcdx){
var zxcdc=zxcdx+zxcdrag[0].offsetWidth/2;
for (var zxcc=1000,zxcnu=-1,zxc0=0;zxc0<zxcary.length;zxc0++){
var zxcpos=Math.abs((zxcPos(zxcary[zxc0])[0]+zxcary[zxc0].offsetWidth/2)-zxcdc);
if (zxcpos<zxcc){
zxcc=zxcpos;
zxcnu=zxc0;
}
}
return zxcary[zxcnu];
for (var zxc1=0;zxc1<zxcary.length;zxc1++){
var zxcpos=zxcPos(zxcary[zxc1])[0];
if ((!zxcdrag[9]&&zxcdx>zxcpos&&zxcdx<zxcpos+zxcary[zxc1].offsetWidth)){
return zxcary[zxc1];
}
}
for (var zxc1=zxcary.length-1;zxc1>=0;zxc1--){
var zxcpos=zxcPos(zxcary[zxc1])[0];
if ((zxcdrag[9]&&zxcdx+zxcdrag[0].offsetWidth>zxcpos)) return zxcary[zxc1];
}
return false;
}

function zxcMseUp(){
if (zxcDragObj){
zxcDragObj[5].parentNode.replaceChild(zxcDragObj[3],zxcDragObj[5]);
var zxcstring='';
var zxcary=zxcDragObj[6];
for (var zxc1=0;zxc1<zxcary.length;zxc1++){
zxcstring+=zxc1+':';
var zxcdivs=zxcElsByClass(zxcDragObj[7][1],zxcary[zxc1],'DIV');
for (var zxc1a=0;zxc1a<zxcdivs.length;zxc1a++) zxcstring+=zxcdivs[zxc1a].nu+':';
zxcstring+='#';
}
zxcDragObj[0].style.visibility='hidden';
zxcCreateCookie(zxcDragObj[7][0],zxcstring,zxcDragObj[7][2]);
zxcDragObj=false;
}
}

function zxcElsByClass(zxccls,zxcp,zxctag) {
zxcp=zxcp||document;
zxcp=typeof(zxcp)=='object'?zxcp:document.getElementById(zxcp);
zxctag=zxctag||'*';
for (var zxcels=zxcp.getElementsByTagName(zxctag),zxcreg=new RegExp('\\b'+zxccls+'\\b'),zxcary=[],zxc0=0;zxc0<zxcels.length;zxc0++){
if (zxcreg.test(zxcels[zxc0].className)) zxcary.push(zxcels[zxc0]);
}
return zxcary;
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}


function zxcMse(zxcevt){
if (document.all) return [zxcevt.clientX,zxcevt.clientY];
return [zxcevt.pageX,zxcevt.pageY];
}

function zxcCreateCookie(zxcnme,zxcv,zxcdays){
document.cookie=zxcnme+'='+zxcv+';expires='+new Date(new Date().getTime()+zxcdays*86400000).toGMTString();+';path=/';
}

function zxcReadCookie(zxcnme){
zxcnme+='=';
var zxcsplit = document.cookie.split(';');
for(var zxc0=0;zxc0<zxcsplit.length;zxc0++) {
var zxcs=zxcsplit[zxc0];
while (zxcs.charAt(0)==' ') zxcs=zxcs.substring(1,zxcs.length);
if (zxcs.indexOf(zxcnme)==0) return zxcs.substring(zxcnme.length,zxcs.length);
}
return null;
}

function zxcEventAdd(zxco,zxct,zxcf,zxcp) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ return zxco[zxcf](e,zxcp);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ return zxco[zxcf](e,zxcp); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e,zxcp); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddEvt(zxcobj,zxcfun,zxcevt,zxcp){
if (zxcobj['zxcadd'+zxcfun+zxcevt]) return;
zxcobj['zxcadd'+zxcfun+zxcevt]=window[zxcfun];
zxcEventAdd(zxcobj,zxcevt,'zxcadd'+zxcfun+zxcevt,zxcp);
}

//zxcAddEvt(window,'zxcDragInit','load',['groupWrapper','groupItem','itemHeader',1,'blank']);
zxcAddEvt(document,'zxcMseUp','dblclick');
zxcAddEvt(document,'zxcDrag','mousemove');


/*]]>*/
</script>
</head>
<body onload="zxcDragInit(['groupWrapper','groupItem',1,'itemHeader','blank']);">

<div id="sort1" class="groupWrapper">
<div id="feeds" class="groupItem">
<div class="itemHeader"><a href="google.com">Feeds</a> </div>

<div class="itemContent">
<div class="sum" style="width:100px;"><a href="#" id="feedshide" style="display:none;" onClick="hideByClass('feedshideMe'); document.getElementById('feedshide').style.display='none'; document.getElementById('feedsshow').style.display='block';" >Hide Summaries</a><a href="#" id="feedsshow" onClick="showByClass('feedshideMe'); document.getElementById('feedsshow').style.display='none'; document.getElementById('feedshide').style.display='block';" >Show Summaries</a>
</div>
<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />

<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
</div>
</div>
<div id="news" class="groupItem">
<div class="itemHeader" >News</div>

<div class="itemContent">
<div class="sum"><a href="#" id="newsshide" style="display:none;" onClick="hideByClass('newshideMe'); document.getElementById('newsshide').style.display='none'; document.getElementById('newsshow').style.display='block';" >Hide Summaries</a><a href="#" id="newsshow" onClick="showByClass('newshideMe'); document.getElementById('newsshow').style.display='none'; document.getElementById('newsshide').style.display='block';" >Show Summaries</a>
</div>
<strong>Test Headline</strong>
<p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />

<strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
</div>
</div>

</div>








<div id="sort2" class="groupWrapper">
<div id="shop" class="groupItem">
<div class="itemHeader" >Shopping</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>

<div id="links" class="groupItem">

<div class="itemHeader" >Links</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

</ul>
</div>
</div>

<div id="images" class="groupItem">
<div class="itemHeader" >Images</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>

</div>










<div id="sort3" class="groupWrapper">
<div id="local" class="groupItem">
<div class="itemHeader" >Local</div>
<div class="itemContent">

<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>

</div>

<div id="biz" class="groupItem">
<div class="itemHeader" >Biz</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>

<div id="slide" class="groupItem">
<div class="itemHeader" >Slideshows</div>

<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>

</div>
</div>

</div>
http://bt5.awardspace.com/

</body>
</html>

vwphillips
10-03-2008, 06:39 PM
latest version


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8" />
<title>Sortables demo - Interface plugin for jQuery</title>

<!-- CSS HIDE SUM -->
<style type="text/css">
.sum{
display:none;
}
</style>

<!-- JS HIDE ME SUM -->
<script type="text/javascript">
document.write("<style type=\"text/css\">.newshideMe, .feedshideMe {display:none;} .sum{display:block;}</style>");
</script>

<!-- CSS -->
<style type="text/css" media="all">
html
{
height: 100%;
}
img{
border: none;
}
body
{
background: #fff;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.groupWrapper
{
position:relative;
width: 32%;
float: left;
margin-right: 1%;
min-height: 400px;
}
.serializer
{
clear: both;
}
.groupItem
{
position:relative;
margin-bottom: 20px;
background-color:#FFFFFF;
border:1px solid #666666;
}
.groupItem2
{
position:relative;
margin-bottom: 20px;
background-color:#FFFFFF;
border:1px solid #666666;
}
.groupItem .itemHeader
{
line-height: 28px;
background-color: #cccccc;
border-top: 2px solid #666666;
color: #000;
padding: 0 10px;
cursor: move;
font-weight: bold;
font-size: 16px;
height: 28px;
position: relative;
}

.sortHelper
{
border: 3px dashed #666;
width: auto !important;
}
.groupWrapper p
{
height: 1px;
margin: 0;
padding: 0;
}
.blank {
border:dashed red 3px;
margin-bottom: 20px;
}

</style>



<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Drag & Drop Objects with persistance (04-Oct-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// Initialised by a <BODY> or window event call to function:
// zxcDragInit(['groupWrapper','groupItem',1,'itemHeader','blank']);
// where parameter 0 is an array
// field 0 = the class name of the draggable objects parent node class name. (string)
// field 1 = the class name of the draggable objects class name. (string)
// field 2 = (optional) the duration of the cookie persistance in days. (digits, default = no cookie)
// field 3 = (optional) the node type draggable objects class name. (string, default = '*')
// field 4 = (optional) the class name if the draggable objects title bar class name. (string, default is the draggable div)
// field 5 = (optional) the class name if the draggable objects blank class name. (string, default is the draggable object outline)

// functional code size about 6.2K


// Functional Code - No Need to change

var zxcDragObj=false;

function zxcDragInit(zxccls){
zxccls[2]=zxccls[2]||-1;
zxccls[3]=zxccls[3]||'*';
for (var zxcnu=0,zxcdivs,zxcdivary=[],zxcparary=zxcElsByClass(zxccls[0],false,'DIV'),zxctitle,zxcary=[],zxc0=0;zxc0<zxcparary.length;zxc0++){
zxcdivs=zxcElsByClass(zxccls[1],zxcparary[zxc0],zxccls[3]);
for (var zxc0a=0;zxc0a<zxcdivs.length;zxc0a++){
zxcary.push(zxcdivs[zxc0a]);
zxcdivary.push(zxcdivs[zxc0a]);
zxcdivs[zxc0a].nu=(zxcnu++)+'';
}
}
var zxccookievalue=zxcReadCookie(zxccls[0]);
if (zxccls[2]>0&&zxccookievalue){
zxccookievalue=zxccookievalue.split('#')
for (var zxcp,zxcs,zxc1=0;zxc1<zxccookievalue.length-1;zxc1++){
zxcs=zxccookievalue[zxc1].split(':');
zxcp=zxcparary[zxcs[0]];
for (var zxc1a=1;zxc1a<zxcs.length-1;zxc1a++){
zxcp.appendChild(zxcdivary[zxcs[zxc1a]]);
}
}
}
var zxcmark=zxcES('DIV',{position:'absolute',overflow:'hidden',overflow:'hidden',left:'0px',top:'0px',wi dth:'0px',height:'0px'});
var zxcblank=zxcES('DIV',{position:'relative'});
zxcblank.className=zxccls[5]||zxccls[1];
for (var zxcpary=[],zxctitle,zxc0=0;zxc0<zxcary.length;zxc0++){
zxcpary.push(zxcary[zxc0]);
zxcary[zxc0].data=[zxcmark,zxcblank,zxcparary,zxccls];
var zxcdrag=zxcES(zxcary[zxc0].cloneNode(true),{position:'absolute',visibility:'hidden',zIndex:'101',left:'0px',top:'5px',width:zx cary[zxc0].offsetWidth+'px',height:zxcary[zxc0].offsetHeight+'px'},document.getElementsByTagName('BODY')[0]);
var zxcobj=zxcElsByClass(zxccls[4],zxcary[zxc0],zxccls[3])[0]||zxcary[zxc0];
zxcobj.drag=zxcdrag;
zxcobj.drag.obj=zxcary[zxc0];
zxcAddEvt(zxcobj,'zxcMseDown','mousedown');
}
}

function zxcMseDown(zxcevt){
var zxcp=this.drag.obj;
var zxcppos=zxcPos(zxcp);
zxcES(zxcp.data[1],{width:zxcp.offsetWidth+'px',height:zxcp.offsetHeight+'px'});
zxcp.parentNode.insertBefore(zxcp.data[0],zxcp);
zxcp.parentNode.replaceChild(zxcp.data[1],zxcp);
// 0 1 2 3 4 = mark 5 = blank 6 = parary 7 =cls
zxcDragObj=[this.drag,zxcppos,zxcMse(zxcevt),zxcp,zxcp.data[0],zxcp.data[1],zxcp.data[2],zxcp.data[3]];
zxcES(this.drag,{visibility:'visible',left:zxcppos[0]+'px',top:zxcppos[1]+'px'});

return false;
}

function zxcDrag(zxcevt){
if (zxcDragObj){
var zxcdrag=zxcDragObj;
var zxcmse=zxcMse(zxcevt);
var zxcdpos=[zxcdrag[1][0]-(zxcdrag[2][0]-zxcmse[0]),zxcdrag[1][1]-(zxcdrag[2][1]-zxcmse[1])];
zxcES(zxcdrag[0],{left:zxcdpos[0]+'px',top:zxcdpos[1]+'px'});
zxcBlank(zxcdrag,zxcdpos);
zxcNoDefault(zxcevt);
}
return false;
}

function zxcBlank(zxcdrag,zxcdpos){
for (var zxcdc=zxcdpos[0]+zxcdrag[0].offsetWidth/2,zxcary=zxcdrag[6],zxcpc,zxcc=1000,zxcnu=-1,zxc0=0;zxc0<zxcary.length;zxc0++){
var zxcpc=Math.abs((zxcPos(zxcary[zxc0])[0]+zxcary[zxc0].offsetWidth/2)-zxcdc);
if (zxcpc<zxcc){ zxcc=zxcpc; zxcnu=zxc0; }
}
var zxccol=zxcary[zxcnu]||zxcdrag[4].parentNode;
zxcary=zxcElsByClass(zxcdrag[7][1],zxccol,zxcdrag[7][3]);
for (var zxcset=false,zxc1=0;zxc1<zxcary.length;zxc1++){
zxcpc=zxcPos(zxcary[zxc1])[1]+zxcary[zxc1].offsetHeight/2;
if (zxcpc>zxcdpos[1]){
zxccol.insertBefore(zxcdrag[5],zxcary[zxc1]);
zxcset=true;
break;
}
}
if (!zxcset) zxccol.appendChild(zxcdrag[5]);
}

function zxcMseUp(){
if (zxcDragObj){
zxcDragObj[5].parentNode.replaceChild(zxcDragObj[3],zxcDragObj[5]);
var zxcstring='';
var zxcary=zxcDragObj[6];
for (var zxc1=0;zxc1<zxcary.length;zxc1++){
zxcstring+=zxc1+':';
var zxcdivs=zxcElsByClass(zxcDragObj[7][1],zxcary[zxc1],zxcDragObj[7][3]);
for (var zxc1a=0;zxc1a<zxcdivs.length;zxc1a++) zxcstring+=zxcdivs[zxc1a].nu+':';
zxcstring+='#';
}
zxcDragObj[0].style.visibility='hidden';
zxcCreateCookie(zxcDragObj[7][0],zxcstring,zxcDragObj[7][2]);
zxcDragObj=false;
}
}

function zxcMse(zxcevt){
if (document.all) return [zxcevt.clientX,zxcevt.clientY];
return [zxcevt.pageX,zxcevt.pageY];
}

function zxcNoDefault(zxcevt){
if (zxcevt.preventDefault) zxcevt.preventDefault();
zxcevt.defaultValue=false;
}

function zxcElsByClass(zxccls,zxcp,zxctag) {
zxcp=zxcp||document;
zxcp=typeof(zxcp)=='object'?zxcp:document.getElementById(zxcp);
zxctag=zxctag||'*';
for (var zxcels=zxcp.getElementsByTagName(zxctag),zxcreg=new RegExp('\\b'+zxccls+'\\b'),zxcary=[],zxc0=0;zxc0<zxcels.length;zxc0++){
if (zxcreg.test(zxcels[zxc0].className)) zxcary.push(zxcels[zxc0]);
}
return zxcary;
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}

function zxcCreateCookie(zxcnme,zxcv,zxcdays){
document.cookie=zxcnme+'='+zxcv+';expires='+new Date(new Date().getTime()+zxcdays*86400000).toGMTString();+';path=/';
}

function zxcReadCookie(zxcnme){
zxcnme+='=';
var zxcsplit = document.cookie.split(';');
for(var zxc0=0;zxc0<zxcsplit.length;zxc0++) {
var zxcs=zxcsplit[zxc0];
while (zxcs.charAt(0)==' ') zxcs=zxcs.substring(1,zxcs.length);
if (zxcs.indexOf(zxcnme)==0) return zxcs.substring(zxcnme.length,zxcs.length);
}
return null;
}

function zxcEventAdd(zxco,zxct,zxcf,zxcp) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ return zxco[zxcf](e,zxcp);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ return zxco[zxcf](e,zxcp); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e,zxcp); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddEvt(zxcobj,zxcfun,zxcevt,zxcp){
if (zxcobj['zxcadd'+zxcfun+zxcevt]) return;
zxcobj['zxcadd'+zxcfun+zxcevt]=window[zxcfun];
zxcEventAdd(zxcobj,zxcevt,'zxcadd'+zxcfun+zxcevt,zxcp);
}

//zxcAddEvt(window,'zxcDragInit','load',['groupWrapper','groupItem','itemHeader',1,'blank']);
zxcAddEvt(document,'zxcMseUp','mouseup');
zxcAddEvt(document,'zxcDrag','mousemove');


/*]]>*/
</script>
</head>
<body onload="zxcDragInit(['groupWrapper','groupItem',1,'*','itemHeader','blank']);">
<input type="button" name="" value="RESET" onclick="zxcCreateCookie('groupWrapper','zxcv',-1)"/>
<div id="sort1" class="groupWrapper">
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" class="groupItem"/>
<div id="feeds" class="groupItem">
<div class="itemHeader"><a href="google.com">Feeds</a> </div>

<div class="itemContent">
<div class="sum" style="width:100px;"><a href="#" id="feedshide" style="display:none;" onClick="hideByClass('feedshideMe'); document.getElementById('feedshide').style.display='none'; document.getElementById('feedsshow').style.display='block';" >Hide Summaries</a><a href="#" id="feedsshow" onClick="showByClass('feedshideMe'); document.getElementById('feedsshow').style.display='none'; document.getElementById('feedshide').style.display='block';" >Show Summaries</a>
</div>
<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />

<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
</div>
</div>
<div id="news" class="groupItem">
<div class="itemHeader" >News</div>

<div class="itemContent">
<div class="sum"><a href="#" id="newsshide" style="display:none;" onClick="hideByClass('newshideMe'); document.getElementById('newsshide').style.display='none'; document.getElementById('newsshow').style.display='block';" >Hide Summaries</a><a href="#" id="newsshow" onClick="showByClass('newshideMe'); document.getElementById('newsshow').style.display='none'; document.getElementById('newsshide').style.display='block';" >Show Summaries</a>
</div>
<strong>Test Headline</strong>
<p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />

<strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
<strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
</div>
</div>

</div>








<div id="sort2" class="groupWrapper">
<div id="shop" class="groupItem">
<div class="itemHeader" >Shopping</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>

<div id="links" class="groupItem">

<div class="itemHeader" >Links</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

</ul>
</div>
</div>

<div id="images" class="groupItem">
<div class="itemHeader" >Images</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>

</div>










<div id="sort3" class="groupWrapper">
<div id="local" class="groupItem">
<div class="itemHeader" >Local</div>
<div class="itemContent">

<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>

</div>

<div id="biz" class="groupItem">
<div class="itemHeader" >Biz</div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>

<div id="slide" class="groupItem">
<div class="itemHeader" >Slideshows</div>

<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>

</div>
</div>

</div>
http://bt5.awardspace.com/
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>

</body>
</html>

webdevised
10-06-2008, 10:38 PM
even better...... Thanks again...

vwphillips
10-07-2008, 12:16 PM
to correct cookie code, allow specific or any type of element and further code reduction.
I will keep the link updated if there are any further changes.

http://www.vicsjavascripts.org.uk/DragDropSort/DragDropSort.htm



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum