獲取CSS值，將其升級到SQL

我有一個div，我做在CSS這樣的：

echo '#'. $pess2['naam'] .' { width: 190px; height: 90px; padding: 0.5em; float: left; left:'. $pess2['left'] .'px; top:'. $pess2['top'] .'px; visibility:'. $view .'; }'

現在，當我動議分度：

$("#3").draggable({ containment: "#containment-wrapper", scroll: false });

我希望把它上傳到我的數據庫。我的問題是;我如何獲得PhP中新的左和頂（x和y）值？

來源

2013-09-23 Sevo

你就需要做一個服務器請求。你可以使用['$ .post'（http://api.jquery.com/jQuery.post/）或['$ .get'（http://api.jquery.com/jQuery.get/），或者如果你喜歡，['$ .ajax']（http://api.jquery.com/jQuery.ajax/） – Alvaro

是的，你有'更新表設置的任何服務器端腳本...'已經？ – vladkras

是的查詢不是問題，唯一的問題是我如何獲得我的PHP變量中的新左值和頂值 – Sevo

如Wietse所述，使用停止事件（http://jqueryui.com/draggable/#events）來檢測拖動何時停止。在停止事件中，您可以使用javascript getBoundingClientRect()來獲取屏幕上DOM元素的位置。

當你精確座標提取，使用您的首選語言將數據發佈到服務器和更新數據庫。

我創建了一個小提琴來解釋如何.getBoundingClientRect()工作http://jsfiddle.net/B62vM/

來源

2013-09-23 12:10:10 Gaurav

好吧，我得到所有的代碼，我現在唯一的問題是，此代碼不工作： '停止：函數（）{ \t \t \t \t \t \t $。員額（「upload.php的」，{左：this.getBoundingClientRect（）左，上：此。getBoundingClientRect（）。top}）' 它不激活我的PHP文件？ – Sevo

jsfiddle鏈接是否適合您，您是否在拖動結束後獲得警報值？ – Gaurav

是的，但我不需要它在一個警報我需要將該值發送到一個PHP文件，這是$ .post功能吧？ – Sevo

使用停止事件（http://jqueryui.com/draggable/#events），併發布使用$。員額數據（）函數（http://api.jquery.com/jQuery.post/）

爲了得到這個職位，看看這裏：http://jsfiddle.net/davidThomas/DGbT3/：

$('#dragThis').draggable(
{ 
    drag: function(){ 
     var offset = $(this).offset(); 
     var xPos = offset.left; 
     var yPos = offset.top; 
     $('#posX').text('x: ' + xPos); 
     $('#posY').text('y: ' + yPos); 
    } 
});

（此問題：How to get the position of a draggable object）

來源

2013-09-23 11:51:19 Wietse

$("#takeHiddenVariable").val($("#idOfYourDiv").attr("style"));

使用隱藏變量$ _ POST [ 'takeHiddenVariable']在你的PHP腳本。

來源

2013-09-23 13:15:09

實際上，你可以做到這一點混合以前的答案，但有一點更正：

它不是使用數字ID是一個好主意，如果你的$pess2['naam']變量是數字，你可以試試echo '#drag'. $pess2['naam'] .'...，那麼你的jQuery的一部分會是：

$('#drag3').draggable({ 
    containment: "#containment-wrapper", 
    scroll: false 
    // use stop here instead of drag to send values only when div stops moving 
    stop: function(){ 
     var offset = $(this).offset(); 
     // send x and y to your script 
     $.post("upload.php", {x: offset.left, y: offset.top}); 
    } 
});

在服務器上，你將有$_POST['x']和$_POST['y']變量，你可以在你的SQL查詢

mysql_query("UPDATE nvt SET left='".$_POST['x']."', top='".$_POST['y']."'")...

使用

下面是小例子：「更新」 fiddle，發送數據和警報成功。請注意，CSS選擇器，jQuery選擇器和div的名稱必須相同。

來源

2013-09-24 02:35:43 vladkras

獲取CSS值，將其升級到SQL

回答

相關問題