Question

他们，

我有一个div，我在css中这样做：

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中获得新的左侧和顶部（x和y）值？

Answer 1

如Wietse所述，使用停止事件（http://jqueryui.com/draggable/#events）来检测拖动何时停止。在停止事件中，您可以使用javascript getBoundingClientRect()在屏幕上获取DOM元素的位置。

如果提取了准确的坐标，请使用首选语言将数据发布到服务器并更新数据库。

我创建了一个小提琴来解释.getBoundingClientRect()如何运作http://jsfiddle.net/B62vM/

Answer 2

使用停止事件（http://jqueryui.com/draggable/#events），并使用$ .post（）函数（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）

Answer 3

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

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

Answer 4

实际上，你可以将以前的答案混合起来，但几乎没有更正：

使用数字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的名称必须相同。

获取CSS值并将其更新为SQL

4 个答案: