jquery css 如果您移除保证金，如何保留头寸

Question

我翻了翻也没找到具体的这个问题，如果我遗漏了，请指点我正确的方向。

目的：我正在为我们的网站创建一个统计报告系统。当您第一次访问它时，它有一个仪表板类型的布局，其中包含总体统计数据以及与之配套的图表。我想做的是 dividual set of stats/graphs 中的每一个都可以根据需要在页面上移动，尽管它最初是从中心开始的，除非你移动它。为此，我正在使用 jQuery 和 jQuery UI。

问题： 对于初始视图，我使用 margin: 0 auto 使 div 在页面上居中。我遇到的第一个问题是当你去拖动它时，你不能把它拖到左边，因为它上面设置了边距。我使用 draggable 事件属性 start: 从 div 中删除了 margin 属性。这解决了不能像你期望的那样移动它的问题，但是当你第一次开始拖动它时，边距的移除迫使 div 跳到屏幕的左侧，你有再次点击它。

有没有办法在删除边距属性时阻止 "jump" 并强制 div 保持其当前位置？我是否完全以错误的方式处理所有这一切？感谢您提供任何帮助，即使您只是告诉我不要这样做并自己想出其他办法。

提前致谢！

jQuery:

<script>
    $(document).ready(function () {
        $.post("getStats.php", function (data) {
            var ctx = document.getElementById("myChart").getContext("2d");
            var myNewChart = new Chart(ctx).Pie(data);

        }, 'json');

        var contPos = $("#statOverallCont").position();
        $("#statOverallCont").draggable({
            snap: ".snapTarget",
            snapMode: "both",
            containment: "body",
            drag: function () {
                $("#statOverallCont").css("margin", "");
                $("#statOverallCont").css("left", contPos.left);
                $("#statOverallCont").css("top", contPos.top);
            }
        });
    });
</script>

^我试过抓取它原来的位置，去掉margin后再尝试改变位置。它似乎根本没有做任何事情。

DIV 风格：

<div id="statOverallCont" style="background-color: #dbdbdb; position: relative; display: table; margin: 0 auto; text-align: center; clear:both; padding: 10px;border: 2px solid black" >

JSFIDDLE DEMO

Answer 1

拖动函数将参数提供给它的回调。 event 和 ui。 ui 有一个名为 ui.position 的属性，其中包含 left 和 top。拖动stras时，去除边距，使元素的位置为绝对位置，并设置从参数中获取的位置值！

看起来像这样

drag: function (event,ui) {
     $("#statOverallCont").css("position", "absolute");
     $("#statOverallCont").css("left", ui.position.left);
     $("#statOverallCont").css("top", ui.position.top);
}

这应该会在拖动时将您的元素粘在鼠标上。

更新：

您需要通过删除 margin:0px 自动更新 css；然后使用 css 的左侧属性将其设置为 50%，以便水平居中。这将允许您拖动元素而不使其跳跃。 顺便说一句，这个想法被 Fata1Err0r 掌握了 所以双赢。 :D

Answer 2

基于 Dimal 的帮助（顺便说一句，谢谢），这似乎是最好的解决方案，无需使用 margin 居中，也无需使用 translate/transform，因为它会模糊文本在 Chrome.

jQuery:

//If you want to center it horizontally/vertically
jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

//If you want to center it horizontally only
jQuery.fn.centerHor = function () {
    this.css("position", "absolute");
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

//If you want to center it vertically only
jQuery.fn.centerVer = function () {
    this.css("position", "absolute");
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    return this;
}

$(document).ready(function () {

    // grab stats from database and create graph
    $.post("getStats.php", function (data) {
        var ctx = document.getElementById("myChart").getContext("2d");
        var myNewChart = new Chart(ctx).Pie(data);
    }, 'json');

    // Center it before displaying it so there is no visual jump
    $("#statOverallCont").centerHor().css("display", "table");

    $("#statOverallCont").draggable({
        snap: ".snapTarget",
        snapMode: "both",
        containment: "body"
    });

});

CSS:

background-color: #dbdbdb; 
display: none; 
clear:both; 
padding: 10px;
border: 2px solid black

我隐藏 div，而 jQuery 负责在页面加载后将所有内容居中，然后我再次使其可见。这可以防止您看到它从左侧到中心。

使用位置而不是边距修复了 jQuery UI 可拖动导致 div 在边距被移除时跳转的问题。

WORKING JSFIDDLE DEMO

在这个问题之后，我以这种方式将它放在一起，以便您可以轻松地在整个站点和未来的站点中使用它。希望这对其他人有帮助！

center.js:

// We add a pos parameter so we can specify which position type we want

// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
    this.css("position", pos);
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it vertically only
jQuery.fn.centerVer = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    return this;
}

在我的 <head>:

<script src="scripts/center.js"></script>

使用示例：

$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")

$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")

$("#example5").center("absolute")
$("#example6").center("fixed")

它适用于任何定位类型，可以轻松地在整个站点中使用，也可以轻松移植到您创建的任何其他站点。

jquery css 如果您移除保证金，如何保留头寸

jquery css how to retain position if you remove margin

javascript

jquery

css

jquery-ui

margin