随机重新定位 jQuery UI 对话框（复活节彩蛋）答案

【问题标题】：Randomly reposition jQuery UI dialog (easter egg)随机重新定位 jQuery UI 对话框（复活节彩蛋）
【发布时间】：2015-04-28 13:26:59
【问题描述】：

我目前正在我的应用程序中实现一个复活节彩蛋功能。每当用户将鼠标悬停在 jQuery UI 关闭按钮上时，对话框 div 应随机重新定位（因此用户无法关闭它）。

这是我目前尝试过的：

$('.ui-icon-closethick').hover(function() {
    console.log("hover");

    $('#trollDialog').dialog('option', 'position', 
        [randomX, randomY]
    );
});

不幸的是，对话框根本没有重新定位。如何使用绝对 x 和 y 位置重新定位对话框？

【问题讨论】：

randomX 和 randomY 的值是多少？他们来自哪里？
这不是position 选项的工作方式。
@j08691 没关系，我只想设置任何绝对值（以像素为单位）作为位置。
@FrédéricHamidi 那么请你告诉我怎么做，好吗？
@j08691 那么没有办法在像素中传递绝对值吗？

标签： javascript jquery jquery-ui dialog jquery-ui-dialog

【解决方案1】：

这是一个简单的工作示例：

$("#dialog").dialog();
$(".ui-dialog-titlebar-close").hover(function () {
    var randomPos = "left" + (Math.random() * 10 < 5 ? "-" : "+") + Math.random() * 100 + " " + "top" + (Math.random() * 10 < 5 ? "-" : "+") + Math.random() * 100;
    $("#dialog").dialog("option", "position", { my: randomPos });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="dialog" title="Hover to Move"></div>

如果要使用 jQuery-UI 的 position，则必须设置与 left 和 top 属性的偏移量

注意：如果您查看“整页”，sn-p 效果会更好

【讨论】：

你的解决方案都有效，但这个答案也提供了正确的 jqery-ui 库。我使用的 jQuery ui 版本似乎太旧了。向@Mackan 提供一种很好的随机化方式的道具。

【解决方案2】：

不是绝对定位，而是你can do relative：

$('.ui-icon-closethick').hover(function(e) {
    var newPos = (Math.floor(Math.random() * 2) == 0 ? "left-" : "right-") +
                 (Math.floor(Math.random() * 100)) + " " +
                 (Math.floor(Math.random() * 2) == 0 ? "bottom-" : "top-") +
                 (Math.floor(Math.random() * 100));
    $( "#trollDialog" ).dialog( "option", "position", { 
        my: newPos
    });
});

不是完美的随机化，但无论如何都是一个例子

【讨论】：