...

View Full Version : using toolman's drag script



FJbrian
02-19-2007, 08:28 PM
See this page please
http://tool-man.org/examples/edit-in-place.html

I want to use example 3 or 4 under sortable editable lists.

I downloaded the js files and such.
I tried to snip out the rest of the code and that doesn't work.

Can someone help please? This seems real simple but apparently I'm missing something.

BTW I did email the writer of that but got no reply. It does seem to be a dated page but....it's exactly what I want.

vwphillips
02-19-2007, 09:35 PM
dont like messing with that script but playing with something simlar

could possible modify to your requirement





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>

<style type="text/css">
<!--
.cls0 {
width:100px;height:20px;background-Color:#989898;border-Left:solid black 1px;border-Bottom:solid black 1px;padding-Left:5px;
}
.cls1 {
height:20px;background-Color:#FFFFCC;border-Left:solid black 1px;border-Bottom:solid black 1px;padding-Left:5px;
}

.cls2 {
height:20px;background-Color:#CCFFFF;border-Left:solid black 1px;border-Bottom:solid black 1px;padding-Left:5px;
}


-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
// Scoll List (05-02-2007) Draft
// by Vic Phillips http://www.vicsjavascripts.org.uk


var zxcRowAry=[];
zxcRowAry[0]=[['title 1','cls0','Sort Alpha','SortAlpha'],['title 1','cls0','Sort Numeric','SortNumeric'],['title 1','cls0','Optional Title']];
zxcRowAry[1]='DragDrop';
zxcRowAry[2]=[['A-Row 0A','cls1'],['aRow 0B','cls2'],['Row 0B','cls1']];
zxcRowAry[3]=[['B-Row 1A','cls1'],['bRow 1B','cls2'],['Row 1B','cls2']];
zxcRowAry[4]=[['C-Row 2A','cls1'],['cRow 2B','cls2'],['Row 2B','cls1']];
zxcRowAry[5]=[['D-Row 3A','cls1'],['Row 3B','cls2'],['Row 3B','cls2']];
zxcRowAry[6]=[['F-Row 4A','cls1'],['Row 4B','cls2'],['Row 4B','cls1']];
zxcRowAry[7]=[['G-Row 5A','cls1'],['Row 5B','cls2'],['Row 5B','cls2']];
zxcRowAry[8]=[['H-Row 6A','cls1'],['Row 6B','cls2'],['Row 6B','cls1']];
zxcRowAry[9]=[['I-Row 7A','cls1'],['Row 7B','cls2'],['Row 7B','cls2']];
zxcRowAry[10]=[['J-Row 8A','cls1'],['Row 8B','cls2'],['Row 8B','cls1']];
zxcRowAry[11]=[['K-Row 9A','cls1'],['Row 9B','cls2'],['Row 9B','cls2']];
zxcRowAry[12]=[['L-Row 10A','cls1'],['Row 10B','cls2'],['Row 10B','cls1']];

function zxcInitList(zxcid,zxcary){
var zxcp=document.getElementById(zxcid);
var zxchdr=zxcS('DIV',{position:'absolute',overflow:'hidden',zIndex:'1',left:'0px',top:'0px',width:(pars eInt(zxcp.style.width)-20)+'px',border:'0px'},zxcp);
zxchdr.className=zxcary[0][0][1];
var zxclst=zxcS(zxcp.cloneNode(false),{position:'relative',overflow:'scroll',border:'0px'},zxcp);
zxclst.onscroll=function(){ zxcScrollCk(this,zxchdrin); }
var zxchdrin=zxcS('DIV',{position:'absolute',left:'0px',top:'0px',width:(parseInt(zxcp.style.width)-20)+'px'},zxchdr);
for (var zxc0=0;zxc0<zxcary[0].length;zxc0++){
var zxcd=zxcS('DIV',{position:'absolute',left:((zxc0>0)?zxcd.offsetLeft+zxcd.offsetWidth:0)+'px',top:'0px'},zxchdrin,zxcary[0][zxc0][0]);
zxcd.className=zxcary[0][zxc0][1];
zxcd.title=zxcary[0][zxc0][2]||null;
if (zxcary[0][zxc0][3]){
zxcd.fun=zxcary[0][zxc0][3];
zxcd.nu=zxc0;
zxcd.ud=true;
zxcS(zxcd,{cursor:(document.all)?'hand':'pointer'});
zxcd.onmouseup=function(){ zxcSort(this,zxclst,true); }
}
}
zxcS(zxchdr,{height:zxcd.offsetHeight+'px'});
var zxclstin=zxcS('DIV',{position:'relative',left:'0px',top:'0px'},zxclst);
if (window['zxc'+zxcary[1]]){ zxcS(zxclstin,{cursor:'n-resize'}); zxclstin.onmousedown=function(){ window['zxc'+zxcary[1]](); } }
zxcS(zxchdr.cloneNode(false),{position:'relative'},zxclstin);
for (var zxc1=2;zxc1<zxcary.length;zxc1++){
var zxcrow=zxcS('DIV',{position:'relative'},zxclstin);
for (var zxc1a=0;zxc1a<zxchdrin.childNodes.length;zxc1a++){
var zxcd=zxcS('DIV',{position:'absolute',left:(zxchdrin.childNodes[zxc1a].offsetLeft)+'px',width:(zxchdrin.childNodes[zxc1a].offsetWidth)+'px',top:'0px'},zxcrow,zxcary[zxc1][zxc1a][0]);
zxcd.className=zxcary[zxc1][zxc1a][1];
}
zxcS(zxcrow,{overflow:'hidden',width:(zxcd.offsetLeft+zxcd.offsetWidth)+'px',height:zxcrow.firstChil d.offsetHeight+'px'});
}
}

function zxcScrollCk(zxcobj,zxchdrin){
zxcS(zxchdrin,{left:-zxcobj.scrollLeft+'px'});
}

var zxcObj;

function zxcDragDrop(){
var zxcevt=window.event||arguments.callee.caller.arguments[0];
var zxcp=zxcEventObj(zxcevt).parentNode;
var zxcpp=zxcp.parentNode;
zxcObj=null;
if (zxcpp.childNodes.length<4||zxcp.style.overflow!='hidden'){ return; }
zxcobj=zxcS(zxcEventObj(zxcevt).parentNode.cloneNode(true),{position:'absolute',zIndex:'10',top:zxcp .offsetTop+'px'},zxcpp.parentNode);
zxcMseDown(zxcobj,zxcp,zxcMse(zxcevt));
}

function zxcMseDown(zxcobj,zxcp,zxcy){
document.onmousemove=function(event){zxcDrag(event);}
document.onmouseup=function(event){zxcMseUp(event);}
document.onselectstart=function(event){window.event.returnValue=false; }
zxcObj=[zxcobj,zxcobj.offsetTop,zxcy,zxcp];
zxcDragY=zxcMse(event)-zxcObj.offsetTop;
}

function zxcMseUp(event){
if (!zxcObj){ return; }
document.onmouseup=null;
document.onmousemove=null;
document.onselectstart=null;
var zxcclds=zxcObj[3].parentNode.childNodes;
if (zxcObj[0].offsetTop>5||zxcObj[0].offsetTop<zxcObj[0].parentNode.offsetHeight){
for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
if (zxcclds[zxc0].offsetTop>zxcObj[0].offsetTop){
zxcS(zxcObj[0],{position:'relative',top:'0px'});
zxcObj[3].parentNode.insertBefore(zxcObj[0],zxcclds[zxc0]);
zxcObj[3].parentNode.removeChild(zxcObj[3]);
zxcObj=null;
return;
}
}
}
zxcObj[0].parentNode.removeChild(zxcObj[0]);
zxcObj=null;
}

function zxcDrag(event) {
zxcObj[0].style.top=(zxcObj[1]+zxcMse(event)-zxcObj[2])+'px';
}

function zxcMse(event){
if(!event) var event=window.event;
if (document.all){ return event.clientY; }
return event.pageY;
}

function zxcEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
return zxceobj;
}

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

var zxcEvt=0;

function zxcAddEvt(zxc,zxcfun,zxcevt){
zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

var zxcSortCol;

function zxcSort(zxcobj,zxclst,zxcud){
zxcSortCol=zxcobj.nu;
var zxcrows=zxclst.firstChild.childNodes;
var zxcary=[];
for (var zxc1=1;zxc1<zxcrows.length;zxc1++){
zxcary.push(zxcrows[zxc1].cloneNode(true));
}
zxcary=zxcary.sort(window['zxc'+zxcobj.fun]);
if (zxcobj.ud){ zxcary=zxcary.reverse(); }
for (var zxc2=0;zxc2<zxcary.length;zxc2++){
zxcrows[zxc2+1].parentNode.replaceChild(zxcary[zxc2],zxcrows[zxc2+1]);
}
zxcobj.ud=!zxcobj.ud;
}

function zxcSortAlpha(zxca,zxcb){
var zxcaa=zxca.childNodes[zxcSortCol].firstChild.data;
var zxcbb=zxcb.childNodes[zxcSortCol].firstChild.data;
if (zxcaa<zxcbb) return -1;
if (zxcaa>zxcbb) return 1;
return 0;
}

function zxcSortNumeric(zxca,zxcb){
var zxcaa=zxca.childNodes[zxcSortCol].firstChild.data.replace(/\D/g,'');
var zxcbb=zxcb.childNodes[zxcSortCol].firstChild.data.replace(/\D/g,''); ;
if (zxcaa<zxcbb) return -1;
if (zxcaa>zxcbb) return 1;
return 0;
}

function zxcS(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;
}



//-->
</script>

</head>

<body onload="zxcInitList('Tst1',zxcRowAry);">

<div id="Tst1" style="position:relative;width:300px;height:200px;border:solid black 1px;" >
</div>

</body>

</html>

FJbrian
02-20-2007, 12:11 AM
thank you for the reply.
You were nice enough to post that code another time. I absolutely plan to use it in another project. However, this is different. I like the list being draggable/sortable and the ability to edit "in-line" too.
I post a top 4-500 players on my site and people will often change it to their own order. Once they get near the end they may completely disagree that playerX even belongs on the list so this way they can just edit his name right out. That one is just so perfect for what I want to do.

Thank you though

vwphillips
02-20-2007, 03:37 AM
hmm

got me going now
added the editable bit


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>

<style type="text/css">
<!--
.cls0 {
width:100px;height:20px;background-Color:#989898;border-Left:solid black 1px;border-Bottom:solid black 1px;padding-Left:5px;
}
.cls1 {
height:20px;background-Color:#FFFFCC;border-Left:solid black 1px;border-Bottom:solid black 1px;padding-Left:5px;
}

.cls2 {
height:20px;background-Color:#CCFFFF;border-Left:solid black 1px;border-Bottom:solid black 1px;padding-Left:5px;
}


-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
// Scoll List (05-02-2007) Draft
// by Vic Phillips http://www.vicsjavascripts.org.uk


var zxcRowAry=[];
zxcRowAry[0]=[['title 1','cls0','Sort Alpha','SortAlpha'],['title 1','cls0','Sort Numeric','SortNumeric'],['title 1','cls0','Optional Title']];
zxcRowAry[1]='DragDrop';
zxcRowAry[2]=[['A-Row 0A','cls1'],['aRow 0B','cls2'],['Row 0B','cls1']];
zxcRowAry[3]=[['B-Row 1A','cls1'],['bRow 1B','cls2'],['Row 1B','cls2']];
zxcRowAry[4]=[['C-Row 2A','cls1'],['cRow 2B','cls2'],['Row 2B','cls1']];
zxcRowAry[5]=[['D-Row 3A','cls1'],['Row 3B','cls2'],['Row 3B','cls2']];
zxcRowAry[6]=[['F-Row 4A','cls1'],['Row 4B','cls2'],['Row 4B','cls1']];
zxcRowAry[7]=[['G-Row 5A','cls1'],['Row 5B','cls2'],['Row 5B','cls2']];
zxcRowAry[8]=[['H-Row 6A','cls1'],['Row 6B','cls2'],['Row 6B','cls1']];
zxcRowAry[9]=[['I-Row 7A','cls1'],['Row 7B','cls2'],['Row 7B','cls2']];
zxcRowAry[10]=[['J-Row 8A','cls1'],['Row 8B','cls2'],['Row 8B','cls1']];
zxcRowAry[11]=[['K-Row 9A','cls1'],['Row 9B','cls2'],['Row 9B','cls2']];
zxcRowAry[12]=[['L-Row 10A','cls1'],['Row 10B','cls2'],['Row 10B','cls1']];

function zxcInitList(zxcid,zxcary){
var zxcp=document.getElementById(zxcid);
var zxchdr=zxcS('DIV',{position:'absolute',overflow:'hidden',zIndex:'1',left:'0px',top:'0px',width:(pars eInt(zxcp.style.width)-20)+'px',border:'0px'},zxcp);
zxchdr.className=zxcary[0][0][1];
var zxclst=zxcS(zxcp.cloneNode(false),{position:'relative',overflow:'scroll',border:'0px'},zxcp);
zxclst.onscroll=function(){ zxcScrollCk(this,zxchdrin); }
var zxchdrin=zxcS('DIV',{position:'absolute',left:'0px',top:'0px',width:(parseInt(zxcp.style.width)-20)+'px'},zxchdr);
for (var zxc0=0;zxc0<zxcary[0].length;zxc0++){
var zxcd=zxcS('DIV',{position:'absolute',left:((zxc0>0)?zxcd.offsetLeft+zxcd.offsetWidth:0)+'px',top:'0px'},zxchdrin,zxcary[0][zxc0][0]);
zxcd.className=zxcary[0][zxc0][1];
zxcd.title=zxcary[0][zxc0][2]||null;
if (zxcary[0][zxc0][3]){
zxcd.fun=zxcary[0][zxc0][3];
zxcd.nu=zxc0;
zxcd.ud=true;
zxcS(zxcd,{cursor:(document.all)?'hand':'pointer'});
zxcd.onmouseup=function(){ zxcSort(this,zxclst,true); }
}
}
zxcS(zxchdr,{height:zxcd.offsetHeight+'px'});
var zxclstin=zxcS('DIV',{position:'relative',left:'0px',top:'0px'},zxclst);
if (window['zxc'+zxcary[1]]){
zxcS(zxclstin,{cursor:'n-resize'});
zxclstin.onmousedown=function(){ window['zxc'+zxcary[1]](); }
zxclstin.ondblclick=function(){ zxcCngText(); }
}
zxcS(zxchdr.cloneNode(false),{position:'relative'},zxclstin);
for (var zxc1=2;zxc1<zxcary.length;zxc1++){
var zxcrow=zxcS('DIV',{position:'relative'},zxclstin);
for (var zxc1a=0;zxc1a<zxchdrin.childNodes.length;zxc1a++){
var zxcd=zxcS('DIV',{position:'absolute',left:(zxchdrin.childNodes[zxc1a].offsetLeft)+'px',width:(zxchdrin.childNodes[zxc1a].offsetWidth)+'px',top:'0px'},zxcrow,zxcary[zxc1][zxc1a][0]);
zxcd.className=zxcary[zxc1][zxc1a][1];
}
zxcS(zxcrow,{overflow:'hidden',width:(zxcd.offsetLeft+zxcd.offsetWidth)+'px',height:zxcrow.firstChil d.offsetHeight+'px'});
}
}

function zxcScrollCk(zxcobj,zxchdrin){
zxcS(zxchdrin,{left:-zxcobj.scrollLeft+'px'});
}

var zxcObj;

function zxcDragDrop(){
var zxcevt=window.event||arguments.callee.caller.arguments[0];
var zxcp=zxcEventObj(zxcevt).parentNode;
var zxcpp=zxcp.parentNode;
zxcObj=null;
if (zxcpp.childNodes.length<4||zxcp.style.overflow!='hidden'){ return; }
zxcobj=zxcS(zxcEventObj(zxcevt).parentNode.cloneNode(true),{position:'absolute',zIndex:'10',top:zxcp .offsetTop+'px'},zxcpp.parentNode);
zxcMseDown(zxcobj,zxcp,zxcMse(zxcevt));
}

function zxcMseDown(zxcobj,zxcp,zxcy){
document.onmousemove=function(event){zxcDrag(event);}
document.onmouseup=function(event){zxcMseUp(event);}
document.onselectstart=function(event){window.event.returnValue=false; }
zxcObj=[zxcobj,zxcobj.offsetTop,zxcy,zxcp];
zxcDragY=zxcMse(event)-zxcObj.offsetTop;
}

function zxcMseUp(event){
if (!zxcObj){ return; }
document.onmouseup=null;
document.onmousemove=null;
document.onselectstart=null;
var zxcclds=zxcObj[3].parentNode.childNodes;
if (zxcObj[0].offsetTop>5||zxcObj[0].offsetTop<zxcObj[0].parentNode.offsetHeight){
for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
if (zxcclds[zxc0].offsetTop>zxcObj[0].offsetTop){
zxcS(zxcObj[0],{position:'relative',top:'0px'});
zxcObj[3].parentNode.insertBefore(zxcObj[0],zxcclds[zxc0]);
zxcObj[3].parentNode.removeChild(zxcObj[3]);
zxcObj=null;
return;
}
}
}
zxcObj[0].parentNode.removeChild(zxcObj[0]);
zxcObj=null;
}

function zxcDrag(event) {
zxcObj[0].style.top=(zxcObj[1]+zxcMse(event)-zxcObj[2])+'px';
}

var zxcTA,zxcTATxt;

function zxcCngText(zxcmde){
var zxcevt=window.event||arguments.callee.caller.arguments[0];
var zxcp=zxcEventObj(zxcevt);
zxcTA=zxcS('TEXTAREA',{position:'absolute',left:'0px',top:'0px',fontSize:'12px'},zxcp);
zxcTA.onkeyup=function(){ zxcTATxt=this.value; }
}

function zxcMse(event){
if(!event) var event=window.event;
if (document.all){ return event.clientY; }
return event.pageY;
}

function zxcEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
return zxceobj;
}

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

var zxcEvt=0;

function zxcAddEvt(zxc,zxcfun,zxcevt){
zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

var zxcSortCol;

function zxcSort(zxcobj,zxclst,zxcud){
zxcSortCol=zxcobj.nu;
var zxcrows=zxclst.firstChild.childNodes;
var zxcary=[];
for (var zxc1=1;zxc1<zxcrows.length;zxc1++){
zxcary.push(zxcrows[zxc1].cloneNode(true));
}
zxcary=zxcary.sort(window['zxc'+zxcobj.fun]);
if (zxcobj.ud){ zxcary=zxcary.reverse(); }
for (var zxc2=0;zxc2<zxcary.length;zxc2++){
zxcrows[zxc2+1].parentNode.replaceChild(zxcary[zxc2],zxcrows[zxc2+1]);
}
zxcobj.ud=!zxcobj.ud;
}

function zxcSortAlpha(zxca,zxcb){
var zxcaa=zxca.childNodes[zxcSortCol].firstChild.data;
var zxcbb=zxcb.childNodes[zxcSortCol].firstChild.data;
if (zxcaa<zxcbb) return -1;
if (zxcaa>zxcbb) return 1;
return 0;
}

function zxcSortNumeric(zxca,zxcb){
var zxcaa=zxca.childNodes[zxcSortCol].firstChild.data.replace(/\D/g,'');
var zxcbb=zxcb.childNodes[zxcSortCol].firstChild.data.replace(/\D/g,''); ;
if (zxcaa<zxcbb) return -1;
if (zxcaa>zxcbb) return 1;
return 0;
}

function zxcS(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 zxcKeyPress(zxcevt){
if (zxcevt.keyCode==27&&zxcTA){
if (zxcTATxt){
if (zxcTATxt.length>0){
zxcTA.parentNode.innerHTML=zxcTATxt;
}
}
zxcTA=null;
zxcTATxt=null;
}
}

zxcAddEvt(document,'zxcKeyPress','keypress');

//-->
</script>

</head>

<body onload="zxcInitList('Tst1',zxcRowAry);">

<div id="Tst1" style="position:relative;width:300px;height:200px;border:solid black 1px;" >
</div>

</body>

</html>


may be being a bit pushy but will replicate appearance of examples 3 and 4 and if your still not happy look at the tool-man code.

dont realy want to do that as playing with somthing similar.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum