• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 886
  • Last Modified:

Drag n drop from left table to right table

hi,

I need to built a drag and drop for a story re-organization. I have used ASP to built a table on left hand size in random order.

and It allows user to drag from left table to right table.
does anyone know how to do it?

thanks
0
hykc
Asked:
hykc
  • 9
  • 8
  • 5
  • +1
1 Solution
 
[ fanpages ]IT Services ConsultantCommented:
Hi hykc,

Are you using DHTML with your ASP?

BFN,

fp.
0
 
hykcAuthor Commented:
I use asp to generate the story sentence from DB and built up a table only
0
 
[ fanpages ]IT Services ConsultantCommented:
Hi hykc,

Sorry?... You are using HTML then?

BFN,

fp.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
hykcAuthor Commented:
yes
0
 
[ fanpages ]IT Services ConsultantCommented:
Hi again,

Thanks for the clarification.

Working examples of image dragging here:

http://www.dynamicdrive.com/dynamicindex11/genericdrag.htm
http://www.dynamicdrive.com/dynamicindex4/image3.htm

BFN,

fp.
0
 
lil_puffballCommented:
here is a table dragging script I wrote:

<style>
.tr{width:100%;border:#000099 2px solid;padding:2;cursor:move;font-size:19;}
.tbl{border:#000099 2px solid;}
.td{font-size:0px;background-color:white;}
</style>

<div id='movedv' style="position:absolute;">&nbsp;</div>

<script>
/*
Draggable table row script by L'il Puffball
Customizable choices (located directly after this comment):
 -tels (array): states the number of rows in each table. 1st doesn't matter (placeholder), 2nd and 3rd relate to 1st and 2nd table.
 -emptrange: states the range that will be used if a table is empty
 -actClr: states the colour of the active border
 -opac: states opacity of temporary div (100 is totally opaque and 0 is totally transparent)
 -cStyle: states cursor style when mouse is over the rows
How to set up table:
 -Each row is a div. You can set the style to anything you like. To add a row, add the following line of code after the existing rows:
  <div id='t1r1'>Table 1 Row 1</div>
    The id MUST correspond to its position! t1r1 stand for table1row1. The text of the table is between the div tags and can
    include anything at all (images, html tags, forms, other divs, etc.)
  Any other choices (class, style, alignment, etc.) may be added:
    <div class='classname' style="background-color:green;font-family:impact;" align=right id='t1r1'>Table 1 Row 1</div>
Functions/variables:
  If you are going to add other javascript functions/variables to this script, you may want to prevent the repetition of
  function/variable names. The list of them is below (only global variables are included because local variables do not affect
  repetition):
  Variables: tels, emptrange, actClr, cStyle, drag, x, y, newpos, curpos, md, obstyle, ofntsz, bdsz, newbdr
  Functions: startdrag, dragrow, stopdrag, init, restore
Description of Functions:
  startdrag: invoked when user presses mouse (onMouseDown). Begins the dragging.
  dragrow: invoked if drag=true and when user moves mouse. Does the actual dragging (sets the temporary div position, finds the range).
  stopdrag: invoked after chkStop. Finishes/stops dragging, adds row to new table, hides the temporary div.
  chkStop: invoked if drag=true and when user releases mouse. Checks to see if mouse is out of range and then invokes stopdrag.
  init: invoked when page loads. Does small things like set variables and table widths.
  restore: invoked throughout the other functions (dragrow and stoprow). Reset the active border back to original border when mouse is out of range.
Other Notes:
  Several ids are used of objects which cannot be repeated when naming other objects:
  -No object id can begin with 't' and have the 3rd character an 'r' (that is, 'test' is ok but 'tire' is not and will throw an error)
  -No object id can begin with 'nt' and have the 4th character an 'r'
  -No object id can be 't1' or 't2' or 'tbl1' or 'tbl2' or 'movedv'
  -Names are DIFFERENT from ids. So you can do this: <object name='tbl1'> but not <object id='tbl1'>
  -ids ARE case sensitive, so though you cannot use 'tbl1' you CAN use 'TBL1' or 'tBl1'
  -this also means you cannot use 'T1R1', you MUST use 't1r1'
  -the stylesheet MUST be used, however it can be modified as long as the border styles are kept

Enjoy the script! -^.^-
*/

var tels=new Array(0,3,3), emptrange=13, actClr='red', opac=70, cStyle='move', tblrge=50;  //customizable choices
var drag=false, x,y, newpos, curpos='', md=document.getElementById('movedv');
var obstyle,  ofntsz, bdsz, newbdr;
md.style.filter="alpha(opacity="+opac+")";

function startdrag() {
var obj=window.event.srcElement;
if(obj!=document.body && obj.id.charAt(0)=='t' && obj.id.charAt(2)=='r'){
var tnum=obj.id.charAt(1); tels[tnum]-=1;
  for(i=1;i<=tels[tnum]+1;i++){if(obj.id.substring(3)<i){document.getElementById('t'+tnum+'r'+i).id='t'+tnum+'r'+(i-1);}}
md.innerHTML=obj.outerHTML; md.style.display='inline'; md.style.left=x; md.style.top=y;
md.style.width=document.getElementById('t'+obj.id.charAt(1)).clientWidth;
document.getElementById(obj.id).id='n'+document.getElementById(obj.id).id;
obj.outerHTML='';
obj=document.getElementById('t'+tnum);
if(obj.innerHTML==''){obj.innerHTML='&nbsp;';}
drag=true;newpos='';
}
}

function dragrow(){
newpos=''; document.body.style.cursor=cStyle;
  var cid=md.innerHTML; var pos=cid.indexOf('id=')+3; cid=cid.substring(pos,cid.indexOf(' ',pos));
md.style.left=x; md.style.top=y; status=x+','+y;
for(i=1;i<tels.length;i++){
  cpr=document.getElementById('tbl'+i);
  if(tels[i]!=0 && x>cpr.offsetLeft-tblrge && x<cpr.offsetLeft+cpr.clientWidth+tblrge){
    var cr=document.getElementById('t'+i+'r1'), ch=cr.clientHeight, ct=cr.offsetTop+bdsz+cpr.offsetTop;
    var t=ct-ch/2, b=ct+ch/2;
    if(y>t&&y<b&&cid!=cr.id){newpos='t'+i+'r1';restore();curpos=newpos;}
    if(newpos==''){
    var cr=document.getElementById('t'+i+'r'+tels[i]), ch=cr.clientHeight, ct=cr.offsetTop+bdsz+cpr.offsetTop;
    var t=ct+ch/2, b=ct+ch+ch/2;
    if(y>t&&y<b&&cid!=cr.id){newpos='t'+i+'rE';restore();curpos='!t'+i+'r'+tels[i];}}
   if(newpos==''){
    for(j=2;j<=tels[i];j++){
    var cr=document.getElementById('t'+i+'r'+j), pr=document.getElementById('t'+i+'r'+(j-1));
    var ch=cr.clientHeight, ph=pr.clientHeight, ct=cr.offsetTop+bdsz+cpr.offsetTop;
    var t=ct-ph/2, b=ct+ch/2;
    if(y>t&&y<b&&cid!=cr.id){newpos='t'+i+'r'+j;restore();curpos=newpos;}}}}
  else{
    var ct=cpr.offsetTop+bdsz;
    var t=ct-emptrange, b=ct+emptrange;
    if(y>t&&y<b){newpos='t'+i;restore();curpos=newpos;}}}
if(newpos==''){restore();}
else{
  if(newpos.indexOf('r')==-1){
    document.getElementById(newpos).style.backgroundColor=actClr;
  }else if(newpos.charAt(3)!='E'){
    document.getElementById(newpos).style.borderTop=newbdr;
  }else{
    document.getElementById(newpos.substring(0,newpos.length-1)+tels[newpos.charAt(1)]).style.borderBottom=newbdr;
}}}

function restore(){
    var obj=document.getElementById(curpos), obj2=document.getElementById(curpos.substring(1));
    if(curpos.indexOf('r')==-1&&obj){obj.style.backgroundColor='white';}
    else if(curpos.charAt(0)!='!'&&obj){obj.style.borderTop=obstyle;}
    else if(curpos.charAt(0)=='!'&&obj2){obj2.style.borderBottom=obstyle;}}

function chkStop(){
if(newpos==''){
  alert('Out of Range!');
  newpos=md.innerHTML; var pos=newpos.indexOf('id=n')+4; newpos=newpos.substring(pos,newpos.indexOf(' ',pos));
  if(newpos.substring(3)>tels[newpos.charAt(1)]){newpos=newpos.substring(0,3)+'E';}}
stopdrag();
}

function stopdrag(){
drag=false; md.style.display='none'; var tnum=newpos.charAt(1);
var obj=document.getElementById('t'+tnum), newid=newpos.substring(3);
  if(newpos.indexOf('r')==-1){obj.innerHTML='';newid=1;}
  if(newid=='E'){newid=tels[tnum]+1;}
var newstr=md.innerHTML; var pos=newstr.indexOf('id=n')+4;
newstr=newstr.substring(0,pos)+'t0r'+newid+newstr.substring(newstr.indexOf(' ',pos));
  if(newpos.charAt(3)=='E'){obj.innerHTML+=newstr;}
  else{
   var insertpos=obj.innerHTML.indexOf(newpos);
   insertpos=obj.innerHTML.toLowerCase().lastIndexOf('<div',insertpos);
   newstr=obj.innerHTML.substring(0,insertpos)+newstr+obj.innerHTML.substring(insertpos-1);
   obj.innerHTML=newstr;}
for(i=tels[tnum];i>=1;i--){
if(newid<=i){
document.getElementById('t'+tnum+'r'+i).id='t'+tnum+'r'+(i+1);}}
document.getElementById('nt0r'+newid).id='t'+tnum+'r'+newid;
if(curpos.charAt(0)!='!'){curpos=curpos.substring(0,3)+(curpos.substring(3)*1+1);}
tels[tnum]+=1; restore(); document.body.style.cursor='auto';}

function init(){
bdsz=parseInt(document.styleSheets[0].rules[1].style.borderWidth);
newbdr=actClr+' '+bdsz+'px '+document.styleSheets[0].rules[1].style.borderStyle;
document.getElementById('tbl1').style.width=document.getElementById('tbl1').clientWidth+bdsz*2;
document.getElementById('tbl2').style.width=document.getElementById('tbl2').clientWidth+bdsz*2;
ofntsz=document.styleSheets[0].rules[0].style.fontSize;
obstyle=document.styleSheets[0].rules[0].style.border;}
</script>

<body onLoad=init(); onMouseDown="startdrag();" onMouseUp="if(drag){chkStop();}"
onMouseMove="x=event.x;y=event.y;window.status=x+','+y;if(drag){dragrow();}">

<table cellspacing=0 cellpadding=0 class='tbl' id='tbl1'>
<tr><td id='t1' class='td'>
<div class='tr' style="background-color:#e2ecff" id='t1r1'>Table 1 Row 1</div>
<div class='tr' style="background-color:#e2ecff" id='t1r2'>Table 1 Row 2</div>
<div class='tr' style="background-color:#e2ecff" id='t1r3'>Table 1 Row 3</div>
</td></tr></table>
<br>
<table cellspacing=0 cellpadding=0 class='tbl' id='tbl2'>
<tr><td id='t2' class='td'>
<div class='tr' style="background-color:#ffddee" id='t2r1'>Table 2 Row 1</div>
<div class='tr' style="background-color:#ffddee" id='t2r2'>Table 2 Row 2</div>
<div class='tr' style="background-color:#ffddee" id='t2r3'>Table 2 Row 3</div>
</td></tr></table>
</body>
0
 
lil_puffballCommented:
Actually that uses divs to simulate tables. Would you prefer to use tables instead?
0
 
hykcAuthor Commented:
hi lil puffball,

I'm just reading your post, so I haven't try your code yet
the layout of my page is here http://www.cweb.com.hk/demos/test/v4/en/test.asp?story_id=71
0
 
lil_puffballCommented:
Wow! That's an adorable site! I'll adapt my code to the tables. :) I have to get going soon though, so I probably won't get around to replying till tomorrow...
0
 
[ fanpages ]IT Services ConsultantCommented:
Hi  lil_puffball,

I tried your code out & kept receiving "Out of Range!" errors when moving the table element cells around, and sometimes even just holding down my mouse button, not moving the pointer, and just releasing the button again.

I think that perhaps you need a check to ensure that the mouse up event is over the alternate table structure before processing accordingly.

BFN,

fp.
0
 
lil_puffballCommented:
fanpages, I don't know what browser you are using, it works fine on my computer.

hykc, here is the script incorporated into your code, hope it's what you're looking for. :)
(You can remove the <base href> tag if you're uploading right to the server)

=========================================
STARTING CODE
=========================================

<base href="http://www.cweb.com.hk/demos/test/v4/en/">


<HTML>
<HEAD>
<TITLE>"Book Works" Reading Site</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<script language=JavaScript src="../js/js.js"></script>
<script language="JavaScript">
var total_sentense=5;
var right_sentense=5;
var count_sentense=0;
var org_arr = new Array()
org_arr[1] ="1";
org_arr[2] ="2";
org_arr[3] ="3";
org_arr[4] ="4";
org_arr[5] ="5";



function changeColor(obj, d)
{

      if (d == "L")
      {
            rowCount = total_sentense;
      }
      else if (d == "R")
      {
            rowCount = right_sentense;
      }
      for (i=1; i<=rowCount; i++)
      {
            LStatus = eval("document.forms[0]."+ d + "Status"+i+".value");
            if (LStatus == 0)
            {
                  eval ("var el = document.getElementById('" + d + i + "')");
            //el.style.backgroundColor = 'white';
            //eval("document.forms[0].LStatus"+i+".value = 0;");
            }
      }
      //var el = document.getElementById(obj);
      
     var e = document.getElementById(d+obj);
       LStatus = eval("document.forms[0]."+d+"Status"+obj+".value");

       eval("document.forms[0]."+d+"Selected.value = obj");

       if (LStatus ==0)
       {
                   if (d =="R")
                  {
                        var a = document.getElementById('RP'+ obj);
                        var temp = a.childNodes[0].nodeValue;
                        //alert(temp.length);
                        if (temp.length >1)
                        {
                              //e.style.backgroundColor = 'red';
                        }
                  }
                  else
                  {
                      if(document.getElementById)
                        {
                      //e.style.backgroundColor = 'red';
                          }
                 }
      
             }
             if (d == "L")
            {

                  insertText();
            }
            else if (d == "R")
            {

                  removeText();
            }

}
function insertText()
{
var pos;
var temp;
if (document.forms[0].haveTarget.value == 1)
{
      haveTarget = false;
}
else
{
      haveTarget = false;
}

if (document.forms[0].LSelected.value != "")
{
      sen_no = eval("document.forms[0].right_target"+document.forms[0].LSelected.value+".value");
      sen_right_loc = eval("document.forms[0].s"+sen_no+".value");

      for (i=1; i<=right_sentense; i++)
      {
            var e = document.getElementById('RP'+ i);
            temp = e.childNodes[0].nodeValue;
            
            if (temp.length == 1)
            {
                  pos = i;
                  break;
            }
            //alert(e.childNodes[0].nodeValue);
      }
      
      LSelected = document.forms[0].LSelected.value;
if (haveTarget)
{      
      RTarget = eval("document.forms[0].right_target"+LSelected+".value");
}
      LStatus = eval("document.forms[0].LStatus"+LSelected+".value");

      if (LStatus == 0)
      {
            if (haveTarget)
            {

                  document.getElementById('RP' + RTarget).childNodes[0].nodeValue = eval("document.forms[0].LValue"+LSelected+".value");
                  eval("document.forms[0].RValue" + RTarget+".value=document.forms[0].LValue"+LSelected+".value");
            }
            else
            {
                  if (sen_right_loc == "")
                  {

                  document.getElementById('RP' + pos).childNodes[0].nodeValue = eval("document.forms[0].LValue"+LSelected+".value");
                  //eval("document.forms[0].LStatus"+LSelected+".value=1");
                  eval("document.forms[0].RValue" + pos+".value=document.forms[0].LValue"+LSelected+".value");
                  eval("document.forms[0].LLoc"+pos+".value="+LSelected);
                  eval("document.forms[0].s"+sen_no+".value="+pos);
                  
                  }
                  else
                  {

                  document.getElementById('RP' + sen_right_loc).childNodes[0].nodeValue = eval("document.forms[0].LValue"+LSelected+".value");
                  //eval("document.forms[0].LStatus"+LSelected+".value=1");
                  eval("document.forms[0].RValue" + sen_right_loc+".value=document.forms[0].LValue"+LSelected+".value");
                  eval("document.forms[0].LLoc"+sen_right_loc+".value="+LSelected);
                  
                  }
            }
      //document.getElementById('L'+LSelected).style.backgroundColor = "#999999";
      //el.style.backgroundColor = 'white';
      count_sentense++;
      }
}
}

function removeText()
{
var pos;
var temp;
if (document.forms[0].haveTarget.value == 1)
{
      haveTarget = true;
}
else
{
      haveTarget = false;
}

if (document.forms[0].RSelected.value != "")
{
      for (i=1; i<=right_sentense; i++)
      {
            var e = document.getElementById('RP'+ i);
            temp = e.childNodes[0].nodeValue;
            
            if (temp.length == 1)
            {
                  pos = i;
                  break;
            }
            //alert(e.childNodes[0].nodeValue);
      }
      RSelected = document.forms[0].RSelected.value;
      RStatus = eval("document.forms[0].RStatus"+RSelected+".value");
      LLoc = eval("document.forms[0].LLoc"+RSelected+".value");

      if (RStatus == 0)
      {
      document.getElementById('RP' + RSelected).childNodes[0].nodeValue = " ";
      eval("document.forms[0].RStatus"+RSelected+".value=0");
      //document.getElementById('L'+LLoc).style.backgroundColor = "white";
      //document.getElementById('R'+RSelected).style.backgroundColor = "white";
      if (!haveTarget)
      {
      eval("document.forms[0].LStatus"+LLoc+".value = 0");
      }

      count_sentense++;

      }
}
}

function checkField()
{

var result="pass";
var errNo = 0;
for (i=1; i<=right_sentense; i++)
{
      var e = document.getElementById('RP'+ i);
      temp = e.childNodes[0].nodeValue;
            
      if (temp.length == 1)
      {
            errNo = 1;
            break;
      }
}


if (errNo == 0)
{
      for (i=1; i<org_arr.length; i++)
      {

            newStr = org_arr[i].split("|");
            if (newStr.length == 1)
            {
                   if (newStr[0] != eval("document.forms[0].LLoc"+i+".value"))
                  {
                              result = "fail";
                              errNo = 3;
                        break;
                  }
            }
            else if (newStr.length > 1)
            {
                  for (j=0; j< newStr.length; j++)
                  {
                        //alert(newStr[j]);
                        //alert(eval("document.forms[0].LLoc"+i+".value"));
                        if (newStr[j] == eval("document.forms[0].LLoc"+i+".value"))
                        {
                              result = "pass";
                              errNo = 0;
                              break;
                        }
                        else
                        {
                              errNo = 3;
                        }
                  }
            }
      }
}

if (errNo == 1)
{
      alert("Please complete the story, thanks!");
      document.location.href = window.location + "#top";
}
else if (errNo == 3)
{
      alert("The sequence is incorrect, please try again!");
      for (i=1; i<=right_sentense; i++)
      {
            document.getElementById('RP' + i).childNodes[0].nodeValue = "\u00A0";
            eval("document.forms[0].LLoc"+i+".value=''");
            eval("document.forms[0].RValue"+i+".value=''");
            eval("document.forms[0].RStatus"+i+".value=0");
            eval("document.forms[0].s"+i+".value=''");
            //document.getElementById('RP' + i).childNodes[0].nodeValue = "\u00A0";
      }
      document.location.href = window.location + "#top";
}
else if (errNo ==0)
{
      document.forms[0].submit_act.value ="Submit";
      return true;
}
return false;
      
      //return true;
}
</script>
<link href="style.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY background="../images/bg.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('../images/en/finish_over.gif','../images/en/top_emb_over.gif','../images/en/top_cd_over.gif','../images/en/top_rtl_over.gif','../images/en/top_b5_over.gif','../images/en/top_gb_over.gif','../images/en/top_entext_over.gif','../images/en/top_menu_over.gif','../images/en/top_acct.gif','../images/en/top_menu.gif','../images/en/top_acct_over.gif')">
<form name="form1" method="post" action="st_01c.asp">
<input type="hidden" name="story_id" value="71">
<input type="hidden" name="total_sentence" value="5">
<input type="hidden" name="title" value="Inventor Sir Thomas Alva Edison">
<input type="hidden" name="org_sequence" value="12345">
<input type="hidden" name="new_sequence">
<input type="hidden" name="submit_act">
<input type=hidden name=s1>
<input type=hidden name=s2>
<input type=hidden name=s3>
<input type=hidden name=s4>
<input type=hidden name=s5>
<div id="divmenu1" style="position:absolute; left:487px; top:79px; width:130px; z-index:1; background-color: #FFFF74; layer-background-color: #FFFF74; border: 1px none #000000; visibility: hidden;"onMouseOut="cmenu('divmenu1');" onMouseOver="MM_swapImage('top_menu','','../images/en/top_menu_over.gif','top_acct','','../images/en/top_acct.gif',1);smenu('divmenu1');">
  <table width="130" border="0" cellspacing="5" cellpadding="0">
    <!--<tr>
      <td width="5" rowspan="8" class="divmenu">&nbsp;</td>
      <td width="130" class="divmenu"><a href="rs_home.asp" class="divmenu">Reading
        Strategies</a></td>
    </tr>
    <tr>
      <td class="divmenu"><a href="ik_home.asp" class="divmenu">I know how to...</a></td>
    </tr>-->
      
    <tr>
      <td class="divmenu"><a href="ru_home.asp" class="divmenu">Reading
        Union</a></td>
    </tr>
    <tr>
      <td class="divmenu"><a href="st_home.asp" class="divmenu">Story
        Train</a></td>
    </tr>
    <tr>
      <td class="divmenu"><a href="ga_home.asp" class="divmenu">Games</a></td>
    </tr>
    <tr>
      <td class="divmenu"><a href="nw_home.asp" class="divmenu">News</a></td>
    </tr>
      
    <tr>
      <td class="divmenu"><a href="tr_home.asp" class="divmenu">Teachers'
        Resources </a></td>
    </tr>
      
  </table>
</div>
<div id="divmenu2" style="position:absolute; left:570px; top:79px; width:124px; z-index:2; background-color: #FFFF74; layer-background-color: #FFFF74; border: 1px none #000000; visibility: hidden;"onMouseOut="cmenu('divmenu2');" onMouseOver="MM_swapImage('top_menu','','../images/en/top_menu.gif','top_acct','','../images/en/top_acct_over.gif',1);smenu('divmenu2');">

  <table width="124" border="0" cellspacing="5" cellpadding="0">
    <tr>
      <td width="1" rowspan="2" class="divmenu">&nbsp;</td>
      <td width="125" class="divmenu"><a href="lgn_login.asp" class="divmenu">Login</a></td>
    </tr>
    <tr>
      <td class="divmenu"><a href="lgn_reminder_01.asp" class="divmenu">Password</a></td>
    </tr>
  </table>

</div>
<a name="top"></a>
<table width="760" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top"><table width="760" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="225"><img src="../images/spacer.gif" width="225" height="1"></td>
          <td width="155"><img src="../images/spacer.gif" width="155" height="1"></td>
          <td width="280"><img src="../images/spacer.gif" width="280" height="1"></td>
          <td width="100"><img src="../images/spacer.gif" width="100" height="1"></td>
          <td width="100"><img src="../images/spacer.gif" width="1" height="1"></td>
        </tr>
        <tr>
          <td width="225" rowspan="3"><a href="javascript:;"><img src="../images/en/logo.gif" alt="Book Works &#57768;&#57713;&#59265;" name="logo" width=225 height=80 border="0" id="logo"></a></td>
          <td width="155" rowspan="3"><img src="../images/en/section_storytrain.gif" alt="Story Train" width="155" height="80"></td>
          <td width="280" height="30" bgcolor="#FFD059"><img src="../images/top_03.gif" alt="*" width=38 height=30><a href="javascript:;" onMouseOver="MM_swapImage('top_emb','','../images/en/top_emb_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/en/top_emb.gif" alt="EMB" name="top_emb" width=30 height=30 border="0" id="top_emb"></a><a href="javascript:;" onMouseOver="MM_swapImage('top_cd','','../images/en/top_cd_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/en/top_cd.gif" alt="Curriculum Development" name="top_cd" width=120 height=30 border="0" id="top_cd"></a><a href="javascript:;" onMouseOver="MM_swapImage('top_rtl','','../images/en/top_rtl_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/en/top_rtl.gif" alt="Reading to Learn" name="top_rtl" width=90 height=30 border="0" id="top_rtl"></a></td>
          <td width="100" rowspan="4" align="center" background="../images/top_07.gif">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="115">
<param name="movie" value="../pets/a1_1.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="../pets/a1_1.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="115"></embed></object>
          </td>
          <td><img src="../images/spacer.gif" width="1" height="30"></td>
        </tr>
        <tr>
          <td height="20"><img src="../images/top_08.gif" alt="*" width=280 height=20></td>
          <td width="110"><img src="../images/spacer.gif" width="1" height="20"></td>
        </tr>
        <tr>
          <td><a href="../index.asp?id=b5" onMouseOver="MM_swapImage('top_b5','','../images/en/top_b5_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/en/top_b5.gif" alt="traditional Chinese" name="top_b5" width=35 height=30 border="0" id="top_b5"></a><a href="javascript:;" onMouseOver="MM_swapImage('top_gb','','../images/en/top_gb_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/en/top_gb.gif" alt="simplified Chinese" name="top_gb" width="28" height="30" border="0" id="top_gb"></a><a href="javascript:;" onMouseOver="MM_swapImage('top_entext','','../images/en/top_entext_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/en/top_entext.gif" alt="text only" name="top_entext" width=44 height=30 border="0" id="top_en"></a><a href="javascript:;"  onMouseOut="cmenu('divmenu1');" onMouseOver="MM_swapImage('top_menu','','../images/en/top_menu_over.gif','top_acct','','../images/en/top_acct.gif',1);smenu('divmenu1');"><img src="../images/en/top_menu.gif" alt="main menu" name="top_menu" width=83 height=30 border="0" id="top_menu"></a><a href="javascript:;"  onMouseOut="cmenu('divmenu2');" onMouseOver="MM_swapImage('top_menu','','../images/en/top_menu.gif','top_acct','','../images/en/top_acct_over.gif',1);smenu('divmenu2');"><img src="../images/en/top_acct.gif" alt="my profile" name="top_acct" width=90 height=30 border="0" id="top_acct"></a></td>
          <td width="110"><img src="../images/spacer.gif" width="1" height="30"></td>
        </tr>
        <tr>
          <td height="35" colspan="3" valign="top" background="../images/grass.gif" bgcolor="#B1FF5C">
            <table width="660" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="599"><table border="0" cellspacing="0" cellpadding="0">
        <tr>
                <td><a href="st_01a.asp"><img src="../images/en/st_menu_01-now.gif" alt="Story Reorganize" width="143" height="28" border="0"></a></td>
                <td><a href="st_02a.asp"><img src="../images/en/st_menu_02.gif" alt="Ending Rewrite" width="119" height="28" border="0"></a></td>
                <td><a href="st_03a.asp"><img src="../images/en/st_menu_03.gif" alt="Story Continuation" width="153" height="28" border="0"></a></td>
  </tr>
            </table></td>
                <td width="61"><a href="javascript:;"><img src="../images/en/return.gif" alt="return" width=61 height=24 border="0"></a></td>
              </tr>
            </table>
          </td>
          <td width="110"><img src="../images/spacer.gif" width="1" height="35"></td>
        </tr>
      </table>
      <TABLE WIDTH=760 BORDER=0 CELLPADDING=0 CELLSPACING=0>
        <TR>
          <TD COLSPAN=2 ROWSPAN=2> <IMG SRC="../images/en/st_01b_01.gif" alt="Story Reorganize" WIDTH=150 HEIGHT=133></TD>
          <TD COLSPAN=2 ROWSPAN=2> <IMG SRC="../images/st_01b_02.gif" WIDTH=234 HEIGHT=133></TD>
          <TD background="../images/grass.gif">&nbsp; </TD>
          <TD> <IMG SRC="../images/st_01b_05.gif" WIDTH=14 HEIGHT=24></TD>
        </TR>
        <TR>
          <TD COLSPAN=2> <IMG SRC="../images/en/st_01b_06.gif" alt="Choose pieces from the left hand column and move them to the right hand column (by double mouse click) in correct order. Note: Only one piece from each color should be chosen. All colors shown on the left hand column should be presented in your completed story. " WIDTH=376 HEIGHT=109></TD>
        </TR>
        <TR>
          <TD valign="top"> <IMG SRC="../images/st_01b_07.gif" WIDTH=15 HEIGHT=100></TD>
          <TD COLSPAN=2 valign="top"> <TABLE WIDTH=354 BORDER=0 CELLPADDING=0 CELLSPACING=0>
              <TR>
                <TD height="10"> <IMG SRC="../images/fr/fr_gw_l_00.gif" WIDTH=4 HEIGHT=10></TD>
                <TD> <IMG SRC="../images/fr/fr_gw_top.gif" WIDTH=345 HEIGHT=10></TD>
                <TD> <IMG SRC="../images/fr/fr_gw_r_00.gif" WIDTH=5 HEIGHT=10></TD>
              </TR>
              <TR>
                <TD height="100%" valign="top" background="../images/fr/fr_gw_l_bg.gif"><IMG SRC="../images/fr/fr_gw_l_01.gif" WIDTH=4 HEIGHT=34><br>
                  <IMG SRC="../images/fr/fr_gw_fr_gw_07.gif" WIDTH=4 HEIGHT=96></TD>
                <TD valign="top" bgcolor="#EAFFCE"> <table width="100%" border="0" cellpadding="0" cellspacing="10">
                    <tr>
                      <td>

<table width="100%" border="0" cellspacing="1" cellpadding="3"><input type="hidden" name="haveTarget" value="1"><input type="hidden" name="LSelected" value="">

<tr><td  onmousedown="startDrag(this);" width="50%" bgcolor=#D9D9FF class="normal" id="L5"><input type="hidden" name="right_target5" value="5"><input type="hidden" name="LValue5" value="In 1931, Edison died at the age of 84."><input type="hidden" name="LStatus5" value="0"><p id="LP5" unselectable=on>In 1931, Edison died at the age of 84.</p></td></tr>
<tr><td  onmousedown="startDrag(this);" width="50%" bgcolor=#C4ECFF class="normal" id="L4"><input type="hidden" name="right_target4" value="4"><input type="hidden" name="LValue4" value="Edison had more than 2000 inventions including telegraph repeater, phonograph recorder and electric light bulb. "><input type="hidden" name="LStatus4" value="0"><p id="LP4" unselectable=on>Edison had more than 2000 inventions including telegraph repeater, phonograph recorder and electric light bulb. </p></td></tr>
<tr><td  onmousedown="startDrag(this);" width="50%" bgcolor=#D1FFD0 class="normal" id="L3"><input type="hidden" name="right_target3" value="3"><input type="hidden" name="LValue3" value="Edison worked very hard. We would think carefully and start again when he failed. "><input type="hidden" name="LStatus3" value="0"><p id="LP3" unselectable=on>Edison worked very hard. We would think carefully and start again when he failed. </p></td></tr>
<tr><td  onmousedown="startDrag(this);" width="50%" bgcolor=#FFDDDD class="normal" id="L1"><input type="hidden" name="right_target1" value="1"><input type="hidden" name="LValue1" value="In 1847, Edison was born in America."><input type="hidden" name="LStatus1" value="0"><p id="LP1" unselectable=on>In 1847, Edison was born in America.</p></td></tr>
<tr><td  onmousedown="startDrag(this);" width="50%" bgcolor=#FFFFB5 class="normal" id="L2"><input type="hidden" name="right_target2" value="2"><input type="hidden" name="LValue2" value="When Edison was a child, he read a lot of books and learned new things around him. "><input type="hidden" name="LStatus2" value="0"><p id="LP2" unselectable=on>When Edison was a child, he read a lot of books and learned new things around him. </p></td></tr>


                         <!-- <tr>
                            <td width="50%" bgcolor="#D9D9FF" class="normal">Story
                              in english, Story in english, Story in english,
                              Story in english, Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#C4ECFF" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#FFDDDD" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#FFFFB5" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#D1FFD0" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#FFFFB5" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#C4ECFF" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#FFDDDD" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#D1FFD0" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#D9D9FF" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>-->
                        </table></td>
                    </tr>
                  </table></TD>
                <TD valign="top" background="../images/fr/fr_gw_r_bg.gif"><IMG SRC="../images/fr/fr_gw_r_01.gif" WIDTH=5 HEIGHT=34><br>
                  <IMG SRC="../images/fr/fr_gw_r_02.gif" WIDTH=5 HEIGHT=96></TD>
              </TR>
              <TR bgcolor="#EAFFCE">
                <TD height="9" COLSPAN=3><IMG SRC="../images/fr/fr_gt_bttm.gif" WIDTH=354 HEIGHT=9></TD>
              </TR>
            </TABLE></TD>
          <TD valign="top"> <IMG SRC="../images/st_01b_09.gif" WIDTH=15 HEIGHT=100></TD>
          <TD valign="top"> <TABLE WIDTH=362 BORDER=0 CELLPADDING=0 CELLSPACING=0>
              <TR>
                <TD height="10"> <IMG SRC="../images/fr/fr_ow_l_00.gif" WIDTH=4 HEIGHT=10></TD>
                <TD> <IMG SRC="../images/fr/fr_ow_top.gif" WIDTH=353 HEIGHT=10></TD>
                <TD> <IMG SRC="../images/fr/fr_ow_r_00.gif" WIDTH=5 HEIGHT=10></TD>
              </TR>
              <TR>
                <TD height="100%" valign="top" background="../images/fr/fr_ow_l_bg.gif"><IMG SRC="../images/fr/fr_ow_l_01.gif" WIDTH=4 HEIGHT=34><br>
                  <IMG SRC="../images/fr/fr_ow_fr_ow_07.gif" WIDTH=4 HEIGHT=96></TD>
                <TD valign="top"> <table width="100%" border="0" cellpadding="0" cellspacing="10" bgcolor="#FFE5A3">
                    <tr>
                      <td class="title"><strong>Inventor Sir Thomas Alva Edison</strong></td>
                    </tr>
                  </table>
                  <table width="100%" border="0" cellpadding="0" cellspacing="10">
                    <tr>
                      <td>

<table width="100%" border="0" cellspacing="1" cellpadding="3"><input type="hidden" name="RSelected" value="">

<tr><td width="50%"  class="normal" id="R1"><input type="hidden" name="RValue1" value=""><input type="hidden" name="RStatus1" value="0"><input type="hidden" name="LLoc1"  value=""><p id="RP1">&nbsp;</p></td></tr><tr><td heigh=5 align=center><img src=../images/dotted_line.gif width=320></td></tr>
<tr><td width="50%"  class="normal" id="R2"><input type="hidden" name="RValue2" value=""><input type="hidden" name="RStatus2" value="0"><input type="hidden" name="LLoc2"  value=""><p id="RP2">&nbsp;</p></td></tr><tr><td heigh=5 align=center><img src=../images/dotted_line.gif width=320></td></tr>
<tr><td width="50%"  class="normal" id="R3"><input type="hidden" name="RValue3" value=""><input type="hidden" name="RStatus3" value="0"><input type="hidden" name="LLoc3"  value=""><p id="RP3">&nbsp;</p></td></tr><tr><td heigh=5 align=center><img src=../images/dotted_line.gif width=320></td></tr>
<tr><td width="50%"  class="normal" id="R4"><input type="hidden" name="RValue4" value=""><input type="hidden" name="RStatus4" value="0"><input type="hidden" name="LLoc4"  value=""><p id="RP4">&nbsp;</p></td></tr><tr><td heigh=5 align=center><img src=../images/dotted_line.gif width=320></td></tr>
<tr><td width="50%"  class="normal" id="R5"><input type="hidden" name="RValue5" value=""><input type="hidden" name="RStatus5" value="0"><input type="hidden" name="LLoc5"  value=""><p id="RP5">&nbsp;</p></td></tr>

                          <!--<tr>
                            <td width="50%" bgcolor="#FFDDDD" class="normal">Story
                              in english, Story in english, Story in english,
                              Story in english, Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#FFFFB5" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#D1FFD0" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#C4ECFF" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#D9D9FF" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>-->
                        </table></td>
                    </tr>
                  </table></TD>
                <TD valign="top" background="../images/fr/fr_ow_r_bg.gif"><IMG SRC="../images/fr/fr_ow_r_01.gif" WIDTH=5 HEIGHT=34><br>
                  <IMG SRC="../images/fr/fr_ow_r_02.gif" WIDTH=5 HEIGHT=96></TD>
              </TR>
              <TR>
                <TD height="9" COLSPAN=3><IMG SRC="../images/fr/fr_ow_bttm.gif" WIDTH=362 HEIGHT=9></TD>
              </TR>
            </TABLE></TD>
          <TD valign="top"> <IMG SRC="../images/st_01b_11.gif" WIDTH=14 HEIGHT=100></TD>
        </TR>
        <TR>
          <TD> <IMG SRC="../images/spacer.gif" WIDTH=15 HEIGHT=1></TD>
          <TD> <IMG SRC="../images/spacer.gif" WIDTH=135 HEIGHT=1></TD>
          <TD> <IMG SRC="../images/spacer.gif" WIDTH=219 HEIGHT=1></TD>
          <TD> <IMG SRC="../images/spacer.gif" WIDTH=15 HEIGHT=1></TD>
          <TD> <IMG SRC="../images/spacer.gif" WIDTH=301 HEIGHT=1></TD>
          <TD> <IMG SRC="../images/spacer.gif" WIDTH=14 HEIGHT=1></TD>
        </TR>
      </TABLE>
      <table width="760" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="right"><a href="javascript:document.forms[0].submit();"  onclick="return checkField();" onMouseOver="MM_swapImage('finish','','../images/en/finish_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/en/finish.gif" alt="finish" name="finish" width="51" height="51" hspace="15" vspace="5" border="0" id="finish"></a></td>
        </tr>
        <tr>
          <td height="50">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="45"><table width="760" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="90" height="28"><img src="../images/spacer.gif" width="90" height="40"></td>
    <td width="580" align="center" class="bttmmenu"> <a href="javascript:;">Home</a> |  
      <a href="javascript:;">Reading
        Union</a> |       <a href="javascript:;">Story Train</a> | <a href="javascript:;">Game</a> | <a href="javascript:;">News </a> | <a href="javascript:;">Teachers'
                  Resources <br>
                  </a><a href="javascript:;">Login</a> | <a href="javascript:;">Forgot
                  Password</a> </td>
    <td width="90" rowspan="2" valign="bottom"><a href="#top"><img src="../images/en/bttm_totop.gif" width="90" height="33" border="0"></a></td>
  </tr>
  <tr>
    <td height="5" colspan="2"><img src="../images/bttm_bg.gif" width="670" height="5"></td>
  </tr>
</table>
</td>
  </tr>
</table>
</form>
</BODY>
</HTML>


<script>
var range=20,numRows=5,pre="R";
var drag=false,obj=null,offL,offT,oldL,oldT,td;

var layersRecord=new Array();

if(document.layers){
document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove=captureMouse;
document.onmouseup=function(){if(obj){endDrag();}}

function startDrag(srcEl){
  document.body.style.cursor="move";
  //set the object
  td=srcEl;
  //get position
  oldL=getLeft(srcEl);
  oldT=getTop(srcEl);
  //create div
  obj=document.createElement("div");
  obj.style.position="absolute";
  obj.style.left=oldL;
  obj.style.top=oldT;
  obj.style.width=td.offsetWidth;
  obj.style.height=td.offsetHeight;
  obj.innerHTML="<table width=\"100%\" border=\"0\" cellspacing=\"1\" cellpadding=\"3\"><tbody><tr></tr></tbody></table>";
  obj.firstChild.firstChild.firstChild.appendChild(td.cloneNode(true));
  document.body.appendChild(obj);
  //calculate position of mouse compared to position of object
  offL=x-oldL;
  offT=y-oldT;
  //set drag to true
  drag=true;
}
function dragObj(){
  //change position of object
  obj.style.left=x-offL;
  obj.style.top=y-offT;
}
function endDrag(){
  document.body.style.cursor="default";
  //set drag to false
  drag=false;
  //snap
  snapToTarget();
  td=null;
  obj.parentNode.removeChild(obj);
  obj=null;
}
function getLeft(obj){var left=0;while(obj.offsetParent){left+=obj.offsetLeft;obj=obj.offsetParent;}return left;}
function getTop(obj){var top=0;while(obj.offsetParent){top+=obj.offsetTop;obj=obj.offsetParent;}return top;}

function captureMouse(e){
  if(document.all){
    x=window.event.x+document.body.scrollLeft;
    y=window.event.y+document.body.scrollTop;
  }else if(document.getElementById||document.layers){
    x=e.pageX;
    y=e.pageY;
  }
  if(drag){dragObj();}
}

function snapToTarget(){
  var target;
  for(var i=1;i<=numRows;i++){
    target=document.all?document.all[pre+i]:document.getElementById(pre+i);
    if(Math.abs(getLeft(obj)-getLeft(target))<=range&&Math.abs(getTop(obj)-getTop(target))<=range){
      target.parentNode.parentNode.insertBefore(td.parentNode.cloneNode(true),target.parentNode);
      td.parentNode.parentNode.insertBefore(target.parentNode,td.parentNode);
      td.parentNode.parentNode.removeChild(td.parentNode);
      return;
    }
  }
  alert('Please drag to a target.');
}
</script>

=========================================
ENDING CODE
=========================================
0
 
lil_puffballCommented:
By the way, you can change the variables at the top:

var range=20,numRows=5,pre="R";

"range" is the amount that the layer can go outside the right row and still be detected.
"numRows" is obvious. :P
"pre" is the prefix for all the cells on the right, e.g. right now the IDs are R1,R2,R3...

You can also drag cells from the right to left, in case you want to change your mind. :)
0
 
hykcAuthor Commented:
thanks puffball

this is a great script, I need to write a script to test the correct order now
it just has some problem on netscape 7,
when I drag from left to right, and release the leftclick button,  all the text is highlighted when i move the mouse
and sometimes the sentence layer won't disapper when I drag from left->right and vice vera

I need to study your code to learn how to do such thing , thanks
0
 
hykcAuthor Commented:
hi puffball,

i'm writiing a script to check the order now,
with your script how can I reverse the layer back the initial position?

Maybe I can do something like this, if the order is incorrect then refresh the page instead of using js to reposition it again.
0
 
hykcAuthor Commented:
hi puffball,


how can I get the value inside the left layer (the variable "target" inside snapToTarget??) ?
I need to pass the value to right hand side, e.g I have variable in left table "right_target1", "right_target2", etc
and I want to pass that value to right table RValue1 if I drop the sentence to row1 in right table. but I don't know how to access the value
0
 
[ fanpages ]IT Services ConsultantCommented:
Hi,

Re: "Out of Range!" errors

My browser is MS-IE 6.0.2800.1106 on Windows 2000 5.00.2195 Service Pack 3.

If you would like me to record a video of the 'action' and the resultant error to send to you, let me know.

BFN,

fp.
0
 
hykcAuthor Commented:
i can't work out how to check the correct order :(
0
 
lil_puffballCommented:
Hi hykc,

What I'm doing is completely switching the rows. So, you should give the table on the right an id, like rightTable.

Then, check if the cell IDs in rightTable are L1, L2, L3, L4, L5.

Here is some sample code:

function checkCorrect(){
  var tbl=document.getElementById("rightTable");
  for(i=0;i<=tbl.childNodes.length;i++){
    if(tbl.childNodes[i].firstChild.id!="L"+(i+1)){alert('Incorrect.');return false;}
  }
  alert('Correct Order!');
  return true;
}
0
 
hykcAuthor Commented:
hi puffball,

i tried your checkCorrect function and put ID=rightTable in the table on the right
and I put alert(tbl.childNodes[i].firstChild.id); inside the for loop, it returns me an empty alert box.
0
 
lil_puffballCommented:
Oop, sorry, should be this:

function checkCorrect(){
  var tbl=document.getElementById("rightTable").firstChild;
  for(i=0;i<=tbl.childNodes.length;i++){
    if(tbl.childNodes[i].firstChild.id!="L"+(i+1)){alert('Incorrect.');return false;}
  }
  alert('Correct Order!');
  return true;
}
0
 
hykcAuthor Commented:
oh great,

it works now the for loop shoould be for(i=0;i<tbl.childNodes.length;i++)

also one last question, the sentence on left hand side table may be 2 choices
e.g
Left Table
-----------
sentence 1
sentence 2
sentence 2.1
sentence 3
sentence 3.1


so the table on the right will only have 3 rows, so should I just use the number of rows on left table on variable "numRows"
0
 
lil_puffballCommented:
Sorry for the delay...
Thanks for the points. :)
In answer to your question, just make it the number of row on the right.
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 9
  • 8
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now