Draggable Tables

Ares · #1 (**permalink**) 08-02-06, 09:42 AM

How can i make my tables draggable, cross-browser as well, thnx in advanced.

Page Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Template_003</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<STYLE type="text/css">
 <!--
 BODY { 
               background-repeat:repeat-x;
               background-position:top center;
               background-attachment:fixed }
 -->
</STYLE>
<body bgcolor="74513b" background="images/bg.jpg">
<table width="39%"  border="0" cellspacing="0" cellpadding="0" name="Content Box">
  <tr> 
    <td height="169"><table width="407"  border="0" cellpadding="0" cellspacing="0">
        <tr> 
          <td colspan="3"><img src="images/Template_003_01.png" width="404" height="11"></td>
        </tr>
        <tr> 
          <td width="43"><img src="images/Template_003_02.png" width="43" height="15"></td>
          <td width="345" height="15" bgcolor="6c513f"><div align="center"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>Text 
              Text Text Text Text Text</strong></font></div></td>
          <td width="19"><img src="images/Template_003_04.png" width="16" height="15"></td>
        </tr>
        <tr> 
          <td colspan="3"><img src="images/Template_003_05.png" width="404" height="30"></td>
        </tr>
      </table>
      <table width="407"  border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td width="13"><img src="images/Template_003_06.png" width="13" height="100%"></td>
          <td width="375" bgcolor="ccb2a2"><div align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Text 
              Text Text Text Text Text Text Text Text Text Text Text Text Text 
              Text Text Text Text Text Text Text Text Text Text Text Text Text 
              Text Text Text Text Text Text Text Text Text Text Text Text Text 
              Text Text Text Text Text Text Text Text Text Text</font></div></td>
          <td width="19"><img src="images/Template_003_08.png" width="16" height="100%"></td>
        </tr>
        <tr> 
          <td colspan="3"><img src="images/Template_003_12.png" width="404" height="55"></td>
        </tr>
      </table></td>
  </tr>
</table>

Nico · #2 (**permalink**) 08-02-06, 09:49 AM

This may helps:

http://www.walterzorn.com/dragdrop/dragdrop_e.htm

Ares · #3 (**permalink**) 08-02-06, 11:17 AM

Quote:

Originally Posted by nico_swd

This may helps:

http://www.walterzorn.com/dragdrop/dragdrop_e.htm

I tried that method, but, im not sure if i did it wrong or anything, but the table didn't move, instead it did what it would normally do, higlight text and images.

TwoD · #4 (**permalink**) 08-02-06, 11:43 AM

Would you mind posting the code with the dragrop script in it? Makes it easier to see if something's wrong

Nico · #5 (**permalink**) 08-02-06, 12:22 PM

Include the script following the description on the page, then put the tables you want to move between divs.

Code:

<div id="yourdiv" style="position:absolute;"><table> etc... </div>

This should do it.

Ares · #6 (**permalink**) 08-02-06, 03:31 PM

Ok, so now i have two tables dragable, but when i select table (content1) and drag, then go onto table two (content2) and drag it (the x- coverage of content1) from a point, "content1" moves instead of selecting "content2". May just be a fault in my code.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Template_003</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<STYLE type="text/css">
 <!--
 BODY { 
               background-repeat:repeat-x;
               background-position:top center;
                }
HTML {
	OverFlow-y: Hidden;
	OverFlow-x: Hidden;
}
 -->
</STYLE>
<body bgcolor="74513b" background="images/bg.jpg">
<script type="text/javascript" src="wz_dragdrop.js"></script>

<div align="left" id="Content1" style="position:absolute; visibility: inherit;"> 
  <table width="39%"  border="0" cellspacing="0" cellpadding="0" name="Content Box">
    <tr> 
      <td height="169"><table width="407"  border="0" cellpadding="0" cellspacing="0">
          <tr> 
            <td colspan="3"><img src="images/Template_003_01.png" width="404" height="11"></td>
          </tr>
          <tr> 
            <td width="43"><img src="images/Template_003_02.png" width="43" height="15"></td>
            <td width="345" height="15" background="images/Template_003_03.png"><div align="center"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>Text 
                Text Text Text Text Text</strong></font></div></td>
            <td width="19"><img src="images/Template_003_04.png" width="16" height="15"></td>
          </tr>
          <tr> 
            <td colspan="3"><img src="images/Template_003_05.png" width="404" height="30"></td>
          </tr>
        </table>
        <table width="407"  border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td width="13"><img src="images/Template_003_06.png" width="13" height="100%"></td>
            <td width="375" background="images/Template_003_13.png"><div align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text</font></div></td>
            <td width="19"><img src="images/Template_003_08.png" width="16" height="100%"></td>
          </tr>
          <tr> 
            <td colspan="3"><img src="images/Template_003_12.png" width="404" height="55"></td>
          </tr>
        </table></td>
    </tr>
  </table>
</div>

<div align="left" id="Content2" style="position:absolute; left: 572px; top: 8px; visibility: inherit;"> 
  <table width="39%"  border="0" cellspacing="0" cellpadding="0" name="Content Box">
    <tr> 
      <td height="169"><table width="407"  border="0" cellpadding="0" cellspacing="0">
          <tr> 
            <td colspan="3"><img src="images/Template_003_01.png" width="404" height="11"></td>
          </tr>
          <tr> 
            <td width="43"><img src="images/Template_003_02.png" width="43" height="15"></td>
            <td width="345" height="15" background="images/Template_003_03.png"><div align="center"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>Text 
                Text Text Text Text Text</strong></font></div></td>
            <td width="19"><img src="images/Template_003_04.png" width="16" height="15"></td>
          </tr>
          <tr> 
            <td colspan="3"><img src="images/Template_003_05.png" width="404" height="30"></td>
          </tr>
        </table>
        <table width="407"  border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td width="13"><img src="images/Template_003_06.png" width="13" height="100%"></td>
            <td width="375" background="images/Template_003_13.png"><div align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text</font></div></td>
            <td width="19"><img src="images/Template_003_08.png" width="16" height="100%"></td>
          </tr>
          <tr> 
            <td colspan="3"><img src="images/Template_003_12.png" width="404" height="55"></td>
          </tr>
        </table></td>
    </tr>
  </table>
</div>
  <script type="text/javascript">
<!--

SET_DHTML("Content2", "Content1");

//-->
</script>
</div>
</body>
</html>

TwoD · #7 (**permalink**) 08-02-06, 04:16 PM

The page works fine in IE and Opera. I noticed a problem in FF where the left table moves when you click on the right one.
This comes down to a problem with the <div> elements not having the correct widths.
It's easy to see if you have the Dev Toolbar in FF and outline all Absolutely positioned elements.

I corrected this by setting style.width to "" (which forces a recalculation of it) on the divs. Then the container divs shrank to the correct size.
I'm not sure if this problem is a side effect of some other error (it doesn't pass the W3C Validator), or what. I doubt it is a problem with the actual script since all the examples on http://www.walterzorn.com work in FF.

Ares · #8 (**permalink**) 08-02-06, 05:13 PM

Quote:

I corrected this by setting style.width to "" (which forces a recalculation of it) on the divs. Then the container divs shrank to the correct size.

How do i set this? Sorry about all the questions, im very new to web coding.

TwoD · #9 (**permalink**) 08-02-06, 05:30 PM

You could add

Code:

document.getElementById('Content1').style.width="";
document.getElementById('Content2').style.width="";

right after

Code:

SET_DHTML("Content2", "Content1");

But that would just be a hack to get it working in FF, and it might break it for other browsers.

I suggest you try the Validator and fix all the issues it reports first, that might fix the cause of the problem and not just the symptoms (hopefully).

Nico · #10 (**permalink**) 08-02-06, 06:18 PM

Since both tables have a set width, you could just add the same width to the divs.

Code:

<div align="left" id="Content1" style="position:absolute; width:407px;">