Code looks ok, but what do you mean by an external event, please define that more clearly.
On Sep 11, 12:08 pm, mskrodzki <[EMAIL PROTECTED]> wrote: > 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 & Gravel </td> > <td><div align="center" class="style6">Thursday, September 11, > 2008 11:06:04 AM</div></td> > <td> </td> > </tr> > </table> > <table width="100%" border="0" cellspacing="0" cellpadding="0"> > <tr> > <td bgcolor="#0000FF"> </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 [email protected] 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 -~----------~----~----~----~------~----~------~--~---
