0

各位，

我有一个像这样在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 中获取新的左侧和顶部（x 和 y）值？

4

4 回答 4

1

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

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

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

于 2013-09-23T12:10:10.653 回答
0

使用停止事件 ( 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);
    }
});

（来自这个问题：如何获取可拖动对象的位置）

于 2013-09-23T11:51:19.167 回答
0 
$("#takeHiddenVariable").val($("#idOfYourDiv").attr("style"));

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

于 2013-09-23T13:15:09.987 回答
0

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

使用数字 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-24T02:35:43.823 回答