使用Javascript按其组件拖动窗口

Question

我使用TideSDK开发了一个带有HTML，CSS和Javascript的Windows应用程序。为了给它一个小部件外观我消失了它的标题栏。所以我无法拖动它.TideSDK文档说“消失标题栏后，你可以使用javascript“。

使用其内容拖动窗口

如何使用javascript选择其组件（在我的案例中为tile）拖动窗口？任何教程或代码，因为我在搜索时没有在谷歌上找到任何内容。

我的应用程序如下所示：

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示例。