Ciao a tutti ragazzi, devo spostare dei vestiti da una tabella ad un altra con l'ipad , il tutto funziona ma se provate ad andare sulla pagina vi accorgerete che la seconda colonna di immagini si sposta molto più in basso della prima e la terza colonna si sposta più in basso della seconda.
il sito è questo: http://idnob.altervista.org/creator.php (navigate con ipad)
Il codice è questo:
codice:
<html>	<head>
		  <title>Intelligent Wardrobe</title>
		<meta charset=utf-8 />
    <title>Intelligent Wardrobe - Creator</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style type="text/css">
      .draggable {
        position: relative;
       
        }
    </style>




</head>
	<body>
<?php
		//Connection
		$link = mysql_connect('localhost', 'idnob', 'Zenemecca5689');
		if (!$link) { die('Could not connect: ' . mysql_error()); }
		//Select DB
		mysql_select_db(my_idnob) or die ("Error in selection database ".mysql_error());
		
		$query = "SELECT image FROM clothes WHERE position='Top'";
		
		echo("<table bgcolor='FFCCFF'>");
		echo("	<tr> <td><h3>Top</h3></td></tr>");
		$result=mysql_query($query) or die ("Query Error".mysql_error());
		
		//lef for top position
		echo("<div class='table'>");
		echo "<tr>";
		while($row = mysql_fetch_array($result))
  		{  			
			echo "<td bgcolor='FFCCFF'><img src='upload/" . $row['image'] . "' height='120' width='120' class='draggable' ></td>";			
		}
		echo "</tr>";
		echo ("</table>");
		echo ("</div>");		
		//center for center position
		echo("<div class='table'");
		$query = "SELECT image FROM clothes WHERE position='Middle'";
		echo("<table bgcolor='blue'>");
		echo("	<tr> <td bgcolor='blue'><h3>Middle</h3></td></tr>");
		$result=mysql_query($query) or die ("Query Error".mysql_error());
		echo "<tr>";
		while($row = mysql_fetch_array($result))
  		{  			
			echo "<td bgcolor='blue'><img src='upload/" . $row['image'] . "' height='120' width='120' class='draggable' ></td>";
			echo "<td> </td>";
		}
		echo "</tr>";
		echo ("</table>");
		echo ("</div>");		
		//right position
		echo("<div class='table'>");
		$query = "SELECT image FROM clothes WHERE position='Bottom'";
		echo("<table bgcolor='3366FF'>");
		echo("	<tr> <td><h3>Bottom</h3></td></tr>");
		$result=mysql_query($query) or die ("Query Error".mysql_error());
		echo "<tr>";
		while($row = mysql_fetch_array($result))
  		{  			
			echo "<td bgcolor='3366FF'><img src='upload/" . $row['image'] . "' height='120' width='120' class='draggable' ></td>";
		}
		echo "</tr>";
		echo ("</table>");
		echo ("</div>"); 
		echo("<div id=\"digiclock\"></div>");
		echo("<div align='center'>");
		echo("<br><br><br><br><br><br><br><br><br><br><br><br><br>");
		echo("<img src='files/stikman.jpg' height='300' width='300'");
		echo("</div>");
		echo("<a href='creator.php'><img src='files/reset.jpeg'></a>");		
		echo("<iframe width=\"400\" height=\"257\" scrolling=\"no\" frameborder=\"no\" noresize=\"noresize\" src=\"http://www.ilmeteo.it/box/previsioni.php?citta=10426&type=day1&width=400&ico=1&lang=eng&days=6&font=Verdana&fontsize=12&bg=FFFFFF&fg=000000&bgtitle=0099FF&fgtitle=FFFFFF&bgtab=F0F0F0&fglink=1773C2\"></iframe>");


?>


</body>
<script type="text/javascript">
      $.fn.draggable = function() {
        var offset = null;
        var start = function(e) {
          var orig = e.originalEvent;
          var pos = $(this).position();
          offset = {
            x: orig.changedTouches[0].pageX - pos.left,
            y: orig.changedTouches[0].pageY - pos.top
          };
        };
        var moveMe = function(e) {
          e.preventDefault();
          var orig = e.originalEvent;
          $(this).css({
            top: orig.changedTouches[0].pageY - offset.y,
            left: orig.changedTouches[0].pageX - offset.x
          });
        };
        this.bind("touchstart", start);
        this.bind("touchmove", moveMe);
      };


      $(".draggable").draggable();
    </script>




</html>
Ho messo in grassetto il position:relative perché penso che ci sia da modificare una proprietà di quel position, voglio ottenere le immagini della seconda e terza colonna che seguono il dito esattamente come la prima.
Spero di essere stato chiaro, grazie in anticipo!