javascript - 使用 Javascript 通过其组件拖动窗口

Question

我已经使用带有 HTML、CSS 和 Javascript 的 TideSDK 开发了一个 Windows 应用程序。为了给它一个小部件的外观，我消除了它的标题栏。所以我不能拖动它。TideSDK 文档说“在标题栏消失后，你可以使用拖动窗口其内容与 javascript"。

如何使用 javascript 选择其组件（在我的情况下为磁贴）拖动窗口？任何教程或代码，因为我在谷歌上没有找到任何我的搜索。

我的应用如下所示：

Answer 1

我编写了以下用于使用 JS 进行拖动的通用函数：

function setDragOfElementOnAnother ($draggableElement, $draggedElememnt, allowDragPredicate) {
    var stopDragFunction = function() {

        $draggedElememnt.data("drag", false);
        $draggedElememnt.removeData("startPoint");

        $("html, body").unbind("mouseup.drag");
        $("html, body").unbind("mousemove.drag");
    };
    var dragFunction = function(e) {
        if (!parseBoolean($draggedElememnt.data("drag")))
            return;

        var begin = $draggedElememnt.data("startPoint");

        $draggedElememnt.css({ left: e.clientX - begin.x, top: e.clientY - begin.y     });
    };

    $draggableElement.mousedown(function(e) {

        if ((e.clientX - $(this).offset().left < 0 || $(this).offset().left +     $(this).width() < e.clientX) ||
            e.clientY - $(this).offset().top < 0)
            return;

        if (allowDragPredicate && !allowDragPredicate(e))
            return;

        $draggedElememnt.data("drag", true);
        $draggedElememnt.data("startPoint", Point(e.clientX - $(this).offset().left, e.clientY - $(this).offset().top));

        $("html, body").bind("mouseup.drag", stopDragFunction);
        $("html, body").bind("mousemove.drag", dragFunction);
    });

    $draggableElement.mouseup(stopDragFunction);
    $draggableElement.mousemove(dragFunction);

}

此函数用于声明使用另一个元素拖动一个元素。
先决条件： （1）被拖动元素的位置必须是固定的或绝对的（相对的也应该起作用）。 (2) jQuery。

通过将可拖动元素和可拖动元素指定为同一个元素，按下元素并移动鼠标将导致元素拖动。

'allowDragPredicate' 变量是可选的，可用于创建边界。

编辑：忘记了。同时添加代码：

function Point(xVal, yVal) {

    if (xVal === undefined) {
        xVal = 0;
    }
    if (yVal === undefined) {
        yVal = 0;
    }
    return {
        x: xVal,
        y: yVal
    };
}

编辑2：并且：

function parseBoolean(str) {
    if (str === true)
        return true;
    if (str)
        return /^true$/i.test(str);
    return false;
}

编辑 3：并且，添加了一个简单的jsFiddle示例。