[EASY] Moving Rows - Change Form Value

Hello Experts,

I have managed to get a piece of code on here, when its finished i will be listing customers in run order, the problem is the drop numbers may have to change, so the drag n drop approach seems very appealing to my not so IT literate users.

I have the drag n drop working fine, the problem i am facing is probably a simple one for you guys... when the row is moved i need the hidden form field values to change to the current rown the order is placed.

Easy 500 points for someone :o)

Dave

-----

<html>
<head>
<script type="text/javascript">
document.onmousemove = drag;
document.onmouseup = clearObj;
document.ondragstart = function() {return false;};

var dragObj, tblBody;
var index = -1;
function setObj(obj)
{
  dragObj = obj;
  tblBody = obj.parentNode;
  for (var i = 0; i < tblBody.rows.length; i ++)
  {
    if (tblBody.rows[i] == obj)
    {
      index = i;
      break;
    }
  }

  var temp = obj;
  objTop = 0;
  objBottom = 0;
  while (temp.offsetParent)
  {
    objTop += temp.offsetTop;
    temp = temp.offsetParent
  }
  objBottom = objTop + obj.offsetHeight;
}

function clearObj()
{
  dragObj = null;
  index = -1;
  objTop = 0;
  objBottom = 0;
}

function drag(e)
{
  if (dragObj)
  {
    var y = window.event? event.clientY: e.pageY;
    if (y < objTop)
    {
      if (index > 0)
      {
        tblBody.insertBefore(tblBody.rows[index], tblBody.rows[index-1]);
        setObj(tblBody.rows[index-1]);
      }
      else
        clearObj();
    }
    else if (y > objBottom)
    {
      if (index < tblBody.rows.length - 1)
      {
        tblBody.insertBefore(tblBody.rows[index+1], tblBody.rows[index]);
        setObj(tblBody.rows[index+1]);
      }
      else
        clearObj();
    }
  }
}
</script>
</head>

<body>
<table width="3%"  border="0" align="left" cellpadding="3" cellspacing="0">
  <tr>
    <td height="20">1</td>
  </tr>
  <tr>
    <td height="20">2</td>
  </tr>
  <tr>
    <td height="20">3</td>
  </tr>
  <tr>
    <td height="20">4</td>
  </tr>
</table>
<table width="90%" cellpadding="3" cellspacing="0">
  <tbody>
    <tr onMouseDown="this.style.background='#E6E6E6'" onMouseUp="this.style.background='#FFFFFF'">
      <td width="6%" onmousedown="setObj(this.parentNode)" onmouseup="clearObj()"><img src="ball.gif" height="20"></td>
      <td width="23%">A 1
      <input name="dropno" type="hidden" id="dropno" value="1"></td>
      <td width="24%">A 2</td>
      <td width="24%">A 3</td>
      <td width="23%">A 4</td>
    </tr>
    <tr onMouseDown="this.style.background='#E6E6E6'" onMouseUp="this.style.background='#FFFFFF'">
      <td onmousedown="setObj(this.parentNode)" onmouseup="clearObj()"><img src="ball.gif" height="20"></td>
      <td>B 1
      <input name="dropno" type="hidden" id="dropno" value="2"></td>
      <td>B 2</td>
      <td>B 3</td>
      <td>B 4</td>
    </tr>
    <tr onMouseDown="this.style.background='#E6E6E6'" onMouseUp="this.style.background='#FFFFFF'">
      <td onmousedown="setObj(this.parentNode)" onmouseup="clearObj()"><img src="ball.gif" height="20"></td>
      <td>C 1
      <input name="dropno" type="hidden" id="dropno" value="3"></td>
      <td>C 2</td>
      <td>C 3</td>
      <td>C 4</td>
    </tr>
    <tr onMouseDown="this.style.background='#E6E6E6'" onMouseUp="this.style.background='#FFFFFF'">
      <td onmousedown="setObj(this.parentNode)" onmouseup="clearObj()"><img src="ball.gif" height="20"></td>
      <td>D 1
      <input name="dropno" type="hidden" id="dropno" value="4"></td>
      <td>D 2</td>
      <td>D 3</td>
      <td>D 4</td>
    </tr>
    <tr>
      <td colspan="5"><div align="center">
        <input type="submit" name="Submit" value="Submit">
      </div></td>
    </tr>
  </tbody>
</table>
</body>
</html>
LVL 6
davecestriaAsked:
Who is Participating?
 
atul_parmarConnect With a Mentor Commented:
davecestria, as I understand, after drag the value of the dropno should be the row number. Is that correct? If it is the try the following code. I just changed the hidden element to text so that its value can be ovserved.

<html>
<head>
<script type="text/javascript">
document.onmousemove = drag;
document.onmouseup = clearObj;
document.ondragstart = function() {return false;};

var dragObj, tblBody;
var index = -1;
function setObj(obj)
{
  dragObj = obj;
  tblBody = obj.parentNode;
  for (var i = 0; i < tblBody.rows.length; i ++)
  {
    if (tblBody.rows[i] == obj)
    {
      index = i;
      break;
    }
  }

  var temp = obj;
  objTop = 0;
  objBottom = 0;
  while (temp.offsetParent)
  {
    objTop += temp.offsetTop;
    temp = temp.offsetParent
  }
  objBottom = objTop + obj.offsetHeight;
}

function clearObj()
{
  var hobj=document.getElementsByName('dropno');
  var i;
  for (i=0; i<hobj.length;)
    hobj[i++].value = i;
  dragObj = null;
  index = -1;
  objTop = 0;
  objBottom = 0;
}

function drag(e)
{
  if (dragObj)
  {
    var y = window.event? event.clientY: e.pageY;
    if (y < objTop)
    {
      if (index > 0)
      {
        tblBody.insertBefore(tblBody.rows[index], tblBody.rows[index-1]);
        setObj(tblBody.rows[index-1]);
      }
      else
        clearObj();
    }
    else if (y > objBottom)
    {
      if (index < tblBody.rows.length - 1)
      {
        tblBody.insertBefore(tblBody.rows[index+1], tblBody.rows[index]);
        setObj(tblBody.rows[index+1]);
      }
      else
        clearObj();
    }
  }
}
</script>
</head>

<body>
<table width="3%"  border="0" align="left" cellpadding="3" cellspacing="0">
  <tr>
    <td height="20">1</td>
  </tr>
  <tr>
    <td height="20">2</td>
  </tr>
  <tr>
    <td height="20">3</td>
  </tr>
  <tr>
    <td height="20">4</td>
  </tr>
</table>
<table width="90%" cellpadding="3" cellspacing="0">
  <tbody>
    <tr onMouseDown="this.style.background='#E6E6E6'" onMouseUp="this.style.background='#FFFFFF'">
      <td width="6%" onmousedown="setObj(this.parentNode)" onmouseup="clearObj()"><img src="ball.gif" height="20"></td>
      <td width="23%">A 1
      <input name="dropno" type="text" id="dropno" value="1"></td>
      <td width="24%">A 2</td>
      <td width="24%">A 3</td>
      <td width="23%">A 4</td>
    </tr>
    <tr onMouseDown="this.style.background='#E6E6E6'" onMouseUp="this.style.background='#FFFFFF'">
      <td onmousedown="setObj(this.parentNode)" onmouseup="clearObj()"><img src="ball.gif" height="20"></td>
      <td>B 1
      <input name="dropno" type="text" id="dropno" value="2"></td>
      <td>B 2</td>
      <td>B 3</td>
      <td>B 4</td>
    </tr>
    <tr onMouseDown="this.style.background='#E6E6E6'" onMouseUp="this.style.background='#FFFFFF'">
      <td onmousedown="setObj(this.parentNode)" onmouseup="clearObj()"><img src="ball.gif" height="20"></td>
      <td>C 1
      <input name="dropno" type="text" id="dropno" value="3"></td>
      <td>C 2</td>
      <td>C 3</td>
      <td>C 4</td>
    </tr>
    <tr onMouseDown="this.style.background='#E6E6E6'" onMouseUp="this.style.background='#FFFFFF'">
      <td onmousedown="setObj(this.parentNode)" onmouseup="clearObj()"><img src="ball.gif" height="20"></td>
      <td>D 1
      <input name="dropno" type="text" id="dropno" value="4"></td>
      <td>D 2</td>
      <td>D 3</td>
      <td>D 4</td>
    </tr>
    <tr>
      <td colspan="5"><div align="center">
        <input type="submit" name="Submit" value="Submit">
      </div></td>
    </tr>
  </tbody>
</table>
</body>
</html>
0
 
atul_parmarCommented:
Hi,

Modify your clearObj function so that it looks like the following.

function clearObj()
{
  var hobj=document.getElementById('dropno');
  if (dragObj != null)
    hobj.value=dragObj.rowIndex + 1;
  dragObj = null;
  index = -1;
  objTop = 0;
  objBottom = 0;
}
0
 
davecestriaAuthor Commented:
Atul, that doesn't work, it gives me a null is null or not an object error on this line:

    hobj.value=dragObj.rowIndex + 1;

Also there is another problem with the code you posted, if i move row one to row four i need to set the value of all 4 hidden form values:

So if i moved row one to row four this would happen:

row 1 form value becomes 4
row 2 becomes 1
row 3 becomes 2
row 4 becomes 3
row 5 stays as 5

Do you undertsand? I'm not sure the modification you posted would do that without the error??
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
atul_parmarCommented:
Ok, Check now.

function clearObj()
{
  var hobj=document.getElementsByName('dropno');
  var i;
  for (i=0; i<hobj.length;)
    hobj[i++].value = i;
  dragObj = null;
  index = -1;
  objTop = 0;
  objBottom = 0;
}
0
 
davecestriaAuthor Commented:
Atul its still not working, i'm still nto quite sure if your changes will make the correct value changes to the form fields.

I have re-posted code, changing the form fields names to unique ones.

<%
if Request.Form <> "" then
Response.Write "A: " & Request.Form("A") & "<br>"
Response.Write "B: " & Request.Form("B") & "<br>"
Response.Write "C: " & Request.Form("C") & "<br>"
Response.Write "D: " & Request.Form("D") & "<br>"
end if
%>
<html>
<head>
<script type="text/javascript">
document.onmousemove = drag;
document.onmouseup = clearObj;
document.ondragstart = function() {return false;};

var dragObj, tblBody;
var index = -1;
function setObj(obj)
{
  dragObj = obj;
  tblBody = obj.parentNode;
  for (var i = 0; i < tblBody.rows.length; i ++)
  {
    if (tblBody.rows[i] == obj)
    {
      index = i;
      break;
    }
  }

  var temp = obj;
  objTop = 0;
  objBottom = 0;
  while (temp.offsetParent)
  {
    objTop += temp.offsetTop;
    temp = temp.offsetParent
  }
  objBottom = objTop + obj.offsetHeight;
}

function clearObj()
{
  var hobj=document.getElementById('A');
  var i;
  for (i=0; i<hobj.length;)
    hobj[i++].value = i;
  dragObj = null;
  index = -1;
  objTop = 0;
  objBottom = 0;
}


function drag(e)
{
  if (dragObj)
  {
    var y = window.event? event.clientY: e.pageY;
    if (y < objTop)
    {
      if (index > 0)
      {
        tblBody.insertBefore(tblBody.rows[index], tblBody.rows[index-1]);
        setObj(tblBody.rows[index-1]);
      }
      else
        clearObj();
    }
    else if (y > objBottom)
    {
      if (index < tblBody.rows.length - 1)
      {
        tblBody.insertBefore(tblBody.rows[index+1], tblBody.rows[index]);
        setObj(tblBody.rows[index+1]);
      }
      else
        clearObj();
    }
  }
}
</script>
</head>

<body>
<form name="form1" method="post" action="test3.asp">
  <table width="3%"  border="0" align="left" cellpadding="3" cellspacing="0">
    <tr>
      <td height="20">1</td>
    </tr>
    <tr>
      <td height="20">2</td>
    </tr>
    <tr>
      <td height="20">3</td>
    </tr>
    <tr>
      <td height="20">4</td>
    </tr>
  </table>
  <table width="90%" cellpadding="3" cellspacing="0">
    <tbody>
      <tr onMouseDown="this.style.background='#E6E6E6'" onMouseUp="this.style.background='#FFFFFF'">
        <td width="6%" onmousedown="setObj(this.parentNode)" onmouseup="clearObj(this.parentNode)"><img src="ball.gif" height="20"></td>
        <td width="23%">A 1
            <input name="A" type="hidden" id="A" value="1"></td>
        <td width="24%">A 2</td>
        <td width="24%">A 3</td>
        <td width="23%">A 4</td>
      </tr>
      <tr onMouseDown="this.style.background='#E6E6E6'" onMouseUp="this.style.background='#FFFFFF'">
        <td onmousedown="setObj(this.parentNode)" onmouseup="clearObj()"><img src="ball.gif" height="20"></td>
        <td>B 1
            <input name="B" type="hidden" id="B" value="2"></td>
        <td>B 2</td>
        <td>B 3</td>
        <td>B 4</td>
      </tr>
      <tr onMouseDown="this.style.background='#E6E6E6'" onMouseUp="this.style.background='#FFFFFF'">
        <td onmousedown="setObj(this.parentNode)" onmouseup="clearObj()"><img src="ball.gif" height="20"></td>
        <td>C 1
            <input name="C" type="hidden" id="C" value="3"></td>
        <td>C 2</td>
        <td>C 3</td>
        <td>C 4</td>
      </tr>
      <tr onMouseDown="this.style.background='#E6E6E6'" onMouseUp="this.style.background='#FFFFFF'">
        <td onmousedown="setObj(this.parentNode)" onmouseup="clearObj()"><img src="ball.gif" height="20"></td>
        <td>D 1
            <input name="D" type="hidden" id="D" value="4"></td>
        <td>D 2</td>
        <td>D 3</td>
        <td>D 4</td>
      </tr>
      <tr>
        <td colspan="5"><div align="center">
            <input type="submit" name="Submit" value="Submit">
        </div></td>
      </tr>
    </tbody>
  </table>
</form>
</body>
</html>
0
 
davecestriaAuthor Commented:
Thank you, works great.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.