jerryman
08-28-2005, 10:00 PM
What I want to do is to rearrange the 2 lists so that the yellow labels are on the left and the numbered 'placeholders' on the right. But if I switch the contents of the 2 cell containers, the labels won't stick when they are dragged.
I'm quite new to JS and don't know what to do. Can anyone help?
(File attached)
<html>
<body style="font-size: 10pt; font-family: Verdana">
<style type="text/css">
.cText {color:white;border-bottom:1px solid blue;}
.cLabel {position:static;background:lightyellow;color:#333333;border:1px solid gray;white-space:'nowrap';line-height:100%;"}
</style>
<div align="">
<table id="formTable" border="0" cellspacing="0" cellpadding="6" width="500" style="line-height: 150%;FONT-SIZE: 10pt; FONT-FAMILY: Verdana">
<tr>
<td>
1. <span id="a0" class="cText"> AAA </span><br>
2. <span id="a1" class="cText"> BBB </span><br>
3. <span id="a2" class="cText"> CCC </span><br>
4. <span id="a3" class="cText"> DDD </span><br>
</td>
<td>
<span id="0" onMouseDown="mdown(this)" onMouseOver="this.style.cursor='default'" class="cLabel"> AAA </span>
<span id="1" onMouseDown="mdown(this)" onMouseOver="this.style.cursor='default'" class="cLabel"> BBB </span>
<span id="2" onMouseDown="mdown(this)" onMouseOver="this.style.cursor='default'" class="cLabel"> CCC </span>
<span id="3" onMouseDown="mdown(this)" onMouseOver="this.style.cursor='default'" class="cLabel"> DDD </span>
</td>
</tr>
</table>
</div>
<script type="text/javaScript">
var dragId=null;
var lablsTotal="4";
var ie = (navigator.appName=="Microsoft Internet Explorer");
document.body.ondrag = function () { return false; };
document.body.onselectstart = function () { return false; };
function mdown(e){
dragId=e;
if (ie){
document.onmousemove=mmove;
document.onmouseup=mup;
}
else{
window.onmousemove=mmove;
window.onmouseup=mup;
}
}
function mmove(e){
if (!dragId) return
if (ie){
var Ev = window.event;
document.selection.empty();
}else{
var Ev = e
window.getSelection().removeAllRanges();
}
mx=Ev.clientX+document.body.scrollLeft;
my=Ev.clientY+document.body.scrollTop;
if ((mx<2)||(my<2))return
if (document.all) document.selection.empty();
dragId.style.position="absolute";
dragId.style.left=mx - dragId.offsetWidth/2;
dragId.style.top=my -dragId.offsetHeight/2;
return false;
}
function mup(){
if (!dragId) return
var formLeft = document.getElementById("formTable").offsetLeft;
var formTop = document.getElementById("formTable").offsetTop;
var spotX = document.getElementById("a"+dragId.id).offsetLeft;
var spotY = document.getElementById("a"+dragId.id).offsetTop;
var spot = getElementRect(document.getElementById("a"+dragId.id));
if (isIn((dragId.offsetLeft+(dragId.offsetWidth/2))-formLeft,(dragId.offsetTop+(dragId.offsetHeight/2))-formTop,spot)){
dragId.style.left = spotX + formLeft;
dragId.style.top = spotY + formTop;
} else dragId.style.position="static";
dragId=null;
resultat();
}
function getElementRect(e){
return {l:e.offsetLeft,t:e.offsetTop,w:e.offsetWidth,h:e.offsetHeight}
}
function isIn(x,y,rect){
return ( ((x > rect.l) && (x < rect.l+rect.w)) && ((y > rect.t) && (y < rect.t+rect.h)) )
}
function resultat(){
var dn=0;
var off = document.getElementsByTagName("span");
for (i=0;i<off.length;i++){
if (off.item(i).style.position=="absolute") dn++;
}
}
</script>
</body>
</html>
I'm quite new to JS and don't know what to do. Can anyone help?
(File attached)
<html>
<body style="font-size: 10pt; font-family: Verdana">
<style type="text/css">
.cText {color:white;border-bottom:1px solid blue;}
.cLabel {position:static;background:lightyellow;color:#333333;border:1px solid gray;white-space:'nowrap';line-height:100%;"}
</style>
<div align="">
<table id="formTable" border="0" cellspacing="0" cellpadding="6" width="500" style="line-height: 150%;FONT-SIZE: 10pt; FONT-FAMILY: Verdana">
<tr>
<td>
1. <span id="a0" class="cText"> AAA </span><br>
2. <span id="a1" class="cText"> BBB </span><br>
3. <span id="a2" class="cText"> CCC </span><br>
4. <span id="a3" class="cText"> DDD </span><br>
</td>
<td>
<span id="0" onMouseDown="mdown(this)" onMouseOver="this.style.cursor='default'" class="cLabel"> AAA </span>
<span id="1" onMouseDown="mdown(this)" onMouseOver="this.style.cursor='default'" class="cLabel"> BBB </span>
<span id="2" onMouseDown="mdown(this)" onMouseOver="this.style.cursor='default'" class="cLabel"> CCC </span>
<span id="3" onMouseDown="mdown(this)" onMouseOver="this.style.cursor='default'" class="cLabel"> DDD </span>
</td>
</tr>
</table>
</div>
<script type="text/javaScript">
var dragId=null;
var lablsTotal="4";
var ie = (navigator.appName=="Microsoft Internet Explorer");
document.body.ondrag = function () { return false; };
document.body.onselectstart = function () { return false; };
function mdown(e){
dragId=e;
if (ie){
document.onmousemove=mmove;
document.onmouseup=mup;
}
else{
window.onmousemove=mmove;
window.onmouseup=mup;
}
}
function mmove(e){
if (!dragId) return
if (ie){
var Ev = window.event;
document.selection.empty();
}else{
var Ev = e
window.getSelection().removeAllRanges();
}
mx=Ev.clientX+document.body.scrollLeft;
my=Ev.clientY+document.body.scrollTop;
if ((mx<2)||(my<2))return
if (document.all) document.selection.empty();
dragId.style.position="absolute";
dragId.style.left=mx - dragId.offsetWidth/2;
dragId.style.top=my -dragId.offsetHeight/2;
return false;
}
function mup(){
if (!dragId) return
var formLeft = document.getElementById("formTable").offsetLeft;
var formTop = document.getElementById("formTable").offsetTop;
var spotX = document.getElementById("a"+dragId.id).offsetLeft;
var spotY = document.getElementById("a"+dragId.id).offsetTop;
var spot = getElementRect(document.getElementById("a"+dragId.id));
if (isIn((dragId.offsetLeft+(dragId.offsetWidth/2))-formLeft,(dragId.offsetTop+(dragId.offsetHeight/2))-formTop,spot)){
dragId.style.left = spotX + formLeft;
dragId.style.top = spotY + formTop;
} else dragId.style.position="static";
dragId=null;
resultat();
}
function getElementRect(e){
return {l:e.offsetLeft,t:e.offsetTop,w:e.offsetWidth,h:e.offsetHeight}
}
function isIn(x,y,rect){
return ( ((x > rect.l) && (x < rect.l+rect.w)) && ((y > rect.t) && (y < rect.t+rect.h)) )
}
function resultat(){
var dn=0;
var off = document.getElementsByTagName("span");
for (i=0;i<off.length;i++){
if (off.item(i).style.position=="absolute") dn++;
}
}
</script>
</body>
</html>