Javascript 获取CSS值并将其更新为SQL

他，伙计们

我在css中制作了一个div，如下所示：

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

现在，当我移动该div时：

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

我想把它上传到我的数据库。 我的问题是,；如何在PhP中获取新的left和top（x和y）值？

使用stop事件（），并使用$.post（）函数（）发布数据

要得到这个职位，请看这里：

---

（来自此问题：）

如Wietse所述，使用stop event（）检测拖动何时停止。在停止事件中，您可以使用javascript

getBoundingClientRect（）

获取DOM元素在屏幕上的位置

提取精确坐标后，使用首选语言将数据发布到服务器并更新数据库

我创建了一个小提琴来解释

.getBoundingClientRect（）

的工作原理

---

在php脚本中的$\u POST['takeHiddenVariable']中使用隐藏变量。

实际上，您可以混合前面的答案进行操作，但只需稍加修改：

使用数字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});
    }
});

在服务器上，您将有

$\u POST['x']

和

$\u POST['y']

变量，可以在SQL查询中使用

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

---

下面是一个小示例：，它发送“已更新”的数据和警报关于成功。请注意，css选择器、jQuery选择器和div的名称必须相同。

您需要发出服务器请求。你可以使用或者，或者如果你愿意的话，是的，你已经有任何带有

updatetable SET…

的服务器端脚本了吗？是的，查询不是问题，唯一的问题是我如何在php变量中获得新的左值和顶值好的，我得到了所有的代码，现在唯一的问题是这段代码不起作用：

stop:function（）{$.post（“upload.php”，{left:this.getBoundingClientRect（）.left，top:this.getBoundingClientRect（）.top}）

它没有激活我的php文件？JSFIDLE链接对你有用吗？拖动结束后你会收到警报值吗？是的，但我不需要它在警报中我需要将该值发送到php文件，这就是$.post函数，对吗？使用chrome developer工具，看看你是否能够发出网络请求。如果是，请检查获取的值g传递给服务器。更新了fiddle，现在它发送一个带有正确参数的post请求。您可以使用开发人员工具对其进行测试，并相应地修改服务器端代码。

$('#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});
    }
});

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