使用 WinMove 移动时制作可拖动面板 'sticky'

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

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

通常，我们会使用 AJAX 谨慎地向 server-side 脚本（例如 PHP 文件）发送消息，并且 back-end 代码会扑通一声新值存入数据库。然后，在创建页面时，您的代码将查询数据库并分配位置坐标。当然，这意味着位置坐标必须从 get-go.

存储在数据库中

这里有一些帖子展示了如何使用 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

使用 WinMove 移动时制作可拖动面板 'sticky'

Make draggable panels 'sticky' when moved using WinMove

javascript

jquery

panel

twitter-bootstrap