2012-01-30 51 views
0

可以做一些幫助我有一個簡單的Ajax動力粘貼應用程序(與jQuery UI和PHP)在開發中,我的代碼存儲X,Y爲拖動項目發佈它到數據庫並將結果循環回到div。我已經成功構建了一個文本版本的代碼(類似於發佈便箋),但我正在嘗試執行可拖動/可縮放版本來保存圖像。但是當我這樣做時,我的位置被存儲在循環到#projbaord div的數據庫中,但未被用於正確定位HTML元素(我檢查了頁面源代碼和樣式:顯示正確的x,y,但這是不反映在屏幕上)。Ajax X和Y位置更新無法正常工作Jquery UI可拖動

我認爲這個問題必須在PHP和位置x,y的樣式循環中出現,但似乎無法理解!任何想法或實現相同結果的另一種方式?

我認爲這可能是一個立場:相對/絕對的問題,但似乎是好的 - 我目前很難過!希望你能天才能幫忙!

Javascript功能來處理數據庫的行爲和存儲值:

function imageStickyDragXYUpdate(){ 

    $(".imagesticky").each(function(index){ 

    var resizethese = $(this).children(); 

    $(this).draggable({ 
    cursor: 'move', 
    stack: '.imagesticky', 
    opacity: '0.5', 
    containment: '#projboard', 
    scrollspeed: '40', 
    scrollSensitivity: '10', 
    stop:function(){ 
     var coord=$(this).position(); 
     var coordLeft = coord.left; 
     var coordTop = coord.top; 
     var imageStickyid = $(this).attr('imagestickyid'); 
     //alert('x='+ coordTop + 'y=' + coordLeft + 'id=' +imageStickyid); 

     var datastring = 'xupdateimg='+ coordTop + '&y=' + coordLeft + '&imgstickyid=' +imageStickyid + '&projid=' + proj_id + '&uid=' + uid; 
     //alert(datastring); 

     $.ajax({ 
       type: "POST", 
       url: "uploaddata.php", 
       data: datastring, 
       success: function(data){ 
          $("#projboardresults").html(data); 
          textStickyDragXYUpdate();//not important other function for working text stickies 
          imageStickyDragXYUpdate(); 

          } 
       }); 
    } 
    }); 


      }); 


} 

PHP展示成果

<?php 

$user_id= $_POST['uid']; 
$proj_id=$_POST['projid'];//to be validated as int 



$get_imgsticky_query = "SELECT * FROM imagesticky WHERE user_id = $user_id AND project_id=$proj_id"; 

           $get_imgsticky_result=mysql_query($get_imgsticky_query); 
           while($row=mysql_fetch_assoc($get_imgsticky_result)){ 
           $x = $row['imagesticky_x']; 
           $y = $row['imagesticky_y']; 
           $imagesticky_w = $row['imagesticky_w']; 
           $imagesticky_h = $row['imagesticky_h']; 
           $imagesticky_url = $row['imagesticky_url']; 
           $imagesticky_id = $row['imagesticky_id']; 

           echo '<div class="imagesticky" imagestickyid="'.$imagesticky_id.'" style="position: absolute; left:'.$x.'px; top:'.$y.'px;"> 
           <a class = "clickaddimage" href="addimage.php"><img src="images/clicktoadd.png" alt="add image" title="Click to add image"</a> 
           <img src="'.$imagesticky_url.'" width="'.$imagesticky_w.'" height="'.$imagesticky_h.'"/> 
           <a href="" class="deleteimagesticky"><img src="images/closey.png" title="delete" alt="delete"/></a> 
           </div>'; 

         } 


?> 
+0

似乎它應該正常工作。嘗試應用位置:相對;元素將包含貼紙。 – 2012-01-30 12:56:33

+0

感謝您的回覆嘗試親戚和沒有變化,非常沮喪! LOL – ChrisSherwood 2012-01-30 13:38:47

+1

不幸的是,如果沒有直接訪問該頁面,將無法確定問題出在哪裏。休息30分鐘,喝一杯茶,並嘗試再次發現問題。 – 2012-01-30 14:58:04

回答

0
var datastring = 'xupdateimg='+ coordTop + '&y=' + coordLeft + '&imgstickyid=' +imageStickyid + '&projid=' + proj_id + '&uid=' + uid; 

這條線的問題,我有X變量存儲的Y值和存儲X變量的Y座標!所以我的代碼似乎把項目放在錯誤的地方,但實際上工作正常。這就是你成爲新父親並嘗試編碼的結果!爲什麼我昨天不能發現這個?大聲笑!

+0

吸取的教訓總是在嘗試查找錯誤時休息一下! – ChrisSherwood 2012-01-31 09:22:32