Question

所以我在弄清楚如何让网页记住您移动可拖动面板的位置时遇到问题，因此它们位于您最后放置它们的位置。目前，您可以使用WinMove（）函数将面板移动到任何位置，但是一旦离开页面，面板将在移动之前返回到原始位置。

// Dragable panels
function WinMove() {
    var element = "[class*=col]";
    var handle = ".ibox-title";
    var connect = "[class*=col]";
    $(element).sortable(
        {
            handle: handle,
             connectWith: connect,
             tolerance: 'pointer',
             forcePlaceholderSize: true,
             opacity: 0.8
        })
        .disableSelection();
}

Answer 1

您需要将新的位置坐标数据存储在某处，通常存储在MySQL等后端数据库中。否则，页面无法记住元素被重新定位到的位置。

通常，我们会使用AJAX谨慎地将消息发送到服务器端脚本（例如PHP文件），并且该后端代码会将新值插入数据库。然后，在创建页面时，您的代码将查询数据库并分配位置坐标。当然，这意味着位置坐标必须从一开始就存储在数据库中。

以下是一些帖子，展示了如何使用AJAX的简单示例：

AJAX request callback using jQuery

一个非常粗略的代码示例，如下所示：

// Dragable panels
function WinMove() {
    var element = "[class*=col]";
    var handle = ".ibox-title";
    var connect = "[class*=col]";
    $(element).sortable(
        {
            handle: handle,
             connectWith: connect,
             tolerance: 'pointer',
             forcePlaceholderSize: true,
             opacity: 0.8
        })
        .disableSelection();
        var top = //get coords, something like: $('#yr_element').position().top;
        var left = //get coords, something like: $('#yr_element').position().left;
        $.ajax({
            type: 'post',
             url: 'your_backend_php_file.php',
            data: 'top='+top+ '&left=' +left,
            success: function(d){
                if (d.length) alert(d);
            }
        });
}

<强> your_backend_php_file.php：

<?php
    $top = $_POST['top'];
    $left = $_POST['left'];

    //store values in your mysql database, by user

使可拖动的面板“粘”＆＃39;使用WinMove移动时

1 个答案: