Here is the code I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="Refresh" content="30;url=http://tsg/UnmannedScale/
maindispatch.asp">

<title>Untitled Document</title>
<script language="JavaScript" src="scripts/prototype.js"></script>
<script language="JavaScript" src="scripts/scriptaculous.js"></script>
<script language="JavaScript" src="scripts/unittest.js"></script>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
.style4 {
        font-size: 24px;
        color: #0000FF;
}
.style5 {color: #000000}
.style6 {color: #0000FF}
.status1 {
        font-family: "Times New Roman", Times, serif;
        font-size: 18px;
        background-color: #999999;
        height: 30px;
        width: auto;
        font-weight: bold;
        text-align: center;
        background-position: center center;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
}
.status2 {
        font-family: "Times New Roman", Times, serif;
        font-size: 18px;
        font-weight: bold;
        background-color: #00FF00;
        height: 30px;
        width: auto;
}
.status3 {
        font-family: "Times New Roman", Times, serif;
        font-size: 18px;
        font-weight: bold;
        background-color: #999933;
        height: 30px;
        width: auto;
}
.status4 {
        font-family: "Times New Roman", Times, serif;
        font-size: 18px;
        font-weight: bold;
        background-color: #CC9999;
        height: 30px;
        width: auto;
}
.status5 {
        font-family: "Times New Roman", Times, serif;
        font-size: 18px;
        font-weight: bold;
        background-color: #99FFFF;
        height: 30px;
        width: auto;
}
.status6 {
        font-family: "Times New Roman", Times, serif;
        font-size: 18px;
        font-weight: bold;
        background-color: #FF0000;
        height: 30px;
        width: auto;
}
-->
</style>
</head>

<body>
<table width="100%" height="40" border="0" cellpadding="0"
cellspacing="1">
  <tr>
    <td><span class="style4">Aggregate Hauler Tracking </span></td>
    <td>Thelen Sand &amp; Gravel </td>
    <td><div align="center" class="style6">Thursday, September 11,
2008 11:06:04 AM</div></td>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#0000FF">&nbsp;</td>
  </tr>
</table>
<center>
<table width="90%" height="40" border="0" cellpadding="0"
cellspacing="1">
  <tr>
    <td><div align="right"><img border="0" id='button845' width="88"
height="30"
src="images/button59496350.jpg"
onmouseover = 'document.getElementById("button845").src = "images/
button52833578.jpg"'
onmouseout =  'document.getElementById("button845").src = "images/
button59496350.jpg"'
onClick="window.location='maindispatch.asp'";></div></td>
  </tr>
</table>

<table width="1000" border="1" cellpadding="0" cellspacing="1"
bordercolor="#CCCCCC" bgcolor="#FFFFFF" id="maindispatch1">
  <tr bgcolor="#0000FF">
        <td width="200" height="40" ><div align="center" class="style1">
          <div align="center">Truck #</div>
        </div></td>
    <td width="130" height="40"  align="center"><div align="center"
class="style1">
      <div align="center">Loading</div>
    </div></td>
    <td width="130" height="40" ><div align="center" class="style1">
      <div align="center">Ticketed</div>
    </div></td>
    <td width="130" height="40" ><div align="center" class="style1">
      <div align="center">To Job </div>
    </div></td>
    <td width="130" height="40" ><div align="center" class="style1">
      <div align="center">On Job </div>
    </div></td>
    <td width="130" height="40" ><div align="center" class="style1">
      <div align="center">Returning</div>
    </div></td>
    <td width="130" height="40" ><div align="center" class="style1">
      <div align="center">In Yard </div>
    </div></td>
  </tr>

    <tr>
          <td height="30"><div align="center"><a
href="truck_ticket_detail.asp" class="style5">608 : 462254</a></div></
td>

            <td height="30"><div align="center">
                </div></td>
            <td height="30"><div id="42" class="status2"
align="center"><script type="text/javascript">
    new Draggable('42', { revert: false, snap: [133, 0] });
  </script>608</div></td>

            <td height="30"><div id="droppable3" align="center">
                <script type="text/javascript">
                Droppables.add('droppable3', {
                accept: '2',
                onDrop:
                });
                </script>
                </div></td>

            <td height="30"><div id="droppable4" align="center"></div></td>

            <td height="30"><div id="droppable5" align="center"></div></td>

            <td height="30"><div id="droppable6" align="center"></div></td>

    </tr>

</table>
</center>
</body>
</html>


Would you be able to look thru this code to see if what I am trying to
do is doable?? Your example is great but is not showing me how to use
an external event to update or insert data into DB and refresh the
page. I do appreciate your responses!!

Mark

On Sep 11, 10:51 am, Diodeus <[EMAIL PROTECTED]> wrote:
> Here's an example you can easily modify:
>
> <table border="1" cellpadding="5">
>         <tr>
>                 <td valign="top">
>                         <ul id='fList'>
>                                 <li>Apples</li>
>                                 <li>Grapes</li>
>                                 <li>Strawberries</li>
>                         </ul>
>                 </td>
>                 <td valign="top">
>                         <div id='fish' class='meat'>Fish</div>
>                         <div id='chicken' class='meat'>Chicken</div>
>                 </td>
>         </tr>
> </table>
>
> <script type="text/javascript">
> Sortable.create("fList", {constraint:false})
> new Draggable('fish',{revert:true})
> new Draggable('chicken',{revert:true})
> Droppables.add('fList',
> {accept:'meat',onDrop:function(dragName,dropName)
> {placeFood(dragName,dropName)}})
>
> function placeFood(dragName,dropName) {
>         $("fList").insert(new Element("li", { id: $(dragName).id+"_" }))
>         $($(dragName).id+"_").innerHTML = $(dragName).innerHTML
>         Sortable.destroy("fList")
>         Sortable.create("fList", {constraint:false})
>
> }
>
> </script>
>
> On Sep 11, 10:46 am, mskrodzki <[EMAIL PROTECTED]> wrote:
>
>
>
> > I have a asp page that displays the results of a DB query in a table.
> > There are certain parts of the table that I have successfully made
> > into draggable elements. The purpose of this table is to act like a
> > status display for vehicles. The top of the table shows the status
> > names and the left of the table shows each vehicle from the query.
> > Within the body of the table, each vehicle will have its current
> > status displayed in the appropriate status column with a colored box
> > and the vehicle number. Each box is draggable only in the horizontal
> > direction and has a snap set to each column position. When a user
> > viewing that page drags a vehicle from one status to another, I need
> > the status of the dragged element to be changed to its new status
> > depending on which column it was dropped into. Then that page is to be
> > refeshed showing the new and updated statuses. This has been quite a
> > challenge for me to figure out...and unfortunately without much
> > success. Any help would be greatly appreciated!
>
> > Mark- Hide quoted text -
>
> - Show quoted text -
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to