AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

node-webkit无边框窗口用纯JS实现拖动改变大小

2014-02-28 912
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：                                     $(function () {             var gui = require('nw.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../jquery-1.11.0.min.js"></script>
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/font-awesome.min.css" rel="stylesheet" />
    <script src="../js/bootstrap.min.js"></script>
    <script>
        $(function () {
            var gui = require('nw.gui');
            var sizeFlag = true;
            var mouseDownFlag = false;
            var oldPoint = {};
            var dragEventFlag = {};
            var sizeSmall = function () {
                $("#frameBody").height(600 - 40);
                gui.Window.get().moveTo(screen.availWidth / 2 - 400, screen.availHeight / 2 - 300);
                gui.Window.get().resizeTo(800, 600);
                sizeFlag = false;
            }
            var sizeMax = function () {
                $("#frameBody").height(screen.availHeight - 40);
                gui.Window.get().moveTo(0, 0)
                gui.Window.get().resizeTo(screen.availWidth, screen.availHeight);
                sizeFlag = true;
            }
            var dragEvent = function (e) {
                if (dragEventFlag.leftTop) {
                    var a = e.pageX - oldPoint.x;
                    var b = e.pageY - oldPoint.y;
                    gui.Window.get().moveBy(a, b);
                    gui.Window.get().resizeBy(0 - a, 0 - b);
                    $("#frameBody").height($("#frameBody").height() - b);
                    $("#frameBody").width($("#frameBody").width() - a);
                    return;
                }
                if (dragEventFlag.rightBottom) {
                    var a = e.pageX - oldPoint.x;
                    var b = e.pageY - oldPoint.y;
                    gui.Window.get().resizeBy(a, b);
                    $("#frameBody").height($("#frameBody").height() + b);
                    $("#frameBody").width($("#frameBody").width() + a);
                    oldPoint.x = e.pageX;
                    oldPoint.y = e.pageY;
                    $("#a").html(a);
                    return;
                }
                if (dragEventFlag.rightTop) {
                    var a = e.pageX - oldPoint.x;
                    var b = e.pageY - oldPoint.y;
                    gui.Window.get().moveBy(0, b);
                    gui.Window.get().resizeBy(a, 0-b);
                    $("#frameBody").height($("#frameBody").height() - b);
                    $("#frameBody").width($("#frameBody").width() + a);
                    oldPoint.x = e.pageX;
                    $("#a").html(a);
                    return;
                }
                if (dragEventFlag.leftBottom) {
                    var a = e.pageX - oldPoint.x;
                    var b = e.pageY - oldPoint.y;
                    gui.Window.get().moveBy(a, 0);
                    gui.Window.get().resizeBy(0-a, b);
                    $("#frameBody").height($("#frameBody").height() + b);
                    $("#frameBody").width($("#frameBody").width() - a);
                    oldPoint.y = e.pageY;
                    $("#a").html(a);
                    return;
                }
                if (dragEventFlag.left) {
                    var a = e.pageX - oldPoint.x;
                    gui.Window.get().moveBy(a, 0);
                    gui.Window.get().resizeBy(0 - a, 0);
                    $("#a").html(a);
                }
                if (dragEventFlag.right) {
                    var a = e.pageX - oldPoint.x;
                    gui.Window.get().resizeBy(a, 0);
                    $("#a").html(a);
                    oldPoint.x = e.pageX;
                    oldPoint.y = e.pageY;
                }
                if (dragEventFlag.top) {
                    var a = e.pageY - oldPoint.y;
                    gui.Window.get().moveBy(0, a);
                    gui.Window.get().resizeBy(0, 0 - a);
                    $("#frameBody").height($("#frameBody").height() - a);
                    $("#a").html(a);
                }
                if (dragEventFlag.bottom) {
                    var a = e.pageY - oldPoint.y;
                    gui.Window.get().resizeBy(0, a);
                    $("#frameBody").height($("#frameBody").height() + a);
                    $("#a").html(a);
                    oldPoint.x = e.pageX;
                    oldPoint.y = e.pageY;
                }
            }
            $(document).mousemove(function (e) {
                if (mouseDownFlag) {
                    dragEvent(e);
                    return;
                }
                if ((e.pageX <= 4 && e.pageY <= 4) || (e.pageX >= ($(document).width() - 4) && e.pageY >= ($(document).height() - 4))) {
                    $("body").css("cursor", "nw-resize");
                    return;
                }
                if ((e.pageX >= ($(document).width() - 4) && e.pageY <= 4) || (e.pageX <= 4 && e.pageY >= ($(document).height() - 4))) {
                    $("body").css("cursor", "ne-resize");
                    return;
                }
                if (e.pageX <= 4 || e.pageX >= ($(document).width() - 4)) {
                    $("body").css("cursor", "w-resize");
                }
                else if (e.pageY <= 4 || e.pageY >= ($(document).height() - 4)) {
                    $("body").css("cursor", "s-resize");
                }
                else {
                    $("body").css("cursor", "initial");
                }
            });
            $(document).mousedown(function (e) {
                oldPoint.x = e.pageX;
                oldPoint.y = e.pageY;
                mouseDownFlag = true;
                if (e.pageX <= 4 && e.pageY <= 4) {
                    dragEventFlag.leftTop = true;
                    return;
                }
                if (e.pageX >= ($(document).width() - 4) && e.pageY >= ($(document).height() - 4)) {
                    dragEventFlag.rightBottom = true;
                    return;
                }
                if (e.pageX >= ($(document).width() - 4) && e.pageY <= 4) {
                    dragEventFlag.rightTop = true;
                    return;
                }
                if (e.pageX <= 4 && e.pageY >= ($(document).height() - 4)) {
                    dragEventFlag.leftBottom = true;
                    return;
                }
                if (oldPoint.x <= 4) {
                    dragEventFlag.left = true;
                    return;
                }
                if (oldPoint.x >= ($(document).width() - 4)) {
                    dragEventFlag.right = true;
                    return;
                }
                if (oldPoint.y <= 4) {
                    dragEventFlag.top = true;
                    return;
                }
                if (oldPoint.y >= ($(document).height() - 4)) {
                    dragEventFlag.bottom = true;
                    return;
                }
            });
            $(document).mouseup(function () {
                mouseDownFlag = false;
                dragEventFlag.leftTop = false;
                dragEventFlag.rightBottom = false;
                dragEventFlag.leftBottom = false;
                dragEventFlag.rightTop = false;
                dragEventFlag.left = false;
                dragEventFlag.right = false;
                dragEventFlag.top = false;
                dragEventFlag.bottom = false;
            });
            $("#resizeBtn").click(function () {
                if (sizeFlag) {
                    sizeSmall();
                } else {
                    sizeMax();
                }
            });
            $("#minisizeBtn").click(function () {
                gui.Window.get().minimize();
            })
            $("#devToolBtn").click(function () {
                gui.Window.get().showDevTools();
            });
            $("#refreshBtn").click(function () {
                window.location.reload();
            });
            $("#cancelBtn").click(function () {
                window.close();
            });
            $("#toolBtns i").hover(function () {
                $(this).css("color", "red");
            }, function () {
                $(this).css("color", "");
            });
            $("#closeBtn").click(function () {
                gui.Window.get().close();
            });
            sizeMax();
        });
    </script>
</head>
<body style="overflow:hidden;cursor:initial">
    <div class="panel panel-primary" style="margin: 0px; padding: 0px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;">
        <div class="panel-heading" style="-webkit-app-region: drag; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;">
            <h3 class="panel-title" style="font-weight:bold;">
                UTMP
            </h3>
            <div id="toolBtns" style="float: right; margin-top: -18px; -webkit-app-region: no-drag;">
                <i id="devToolBtn" class="fa fa-puzzle-piece" style="margin:4px; cursor:pointer;"></i>
                <i id="refreshBtn" class="fa fa-refresh" style="margin:4px; cursor:pointer;"></i>
                <i id="minisizeBtn" class="fa fa-minus" style="margin:4px; cursor:pointer;"></i>
                <i id="resizeBtn" class="fa fa-retweet" style="margin: 4px; cursor: pointer;"></i>
                <i id="closeBtn" class="fa fa-times" style="margin-left: 4px; cursor: pointer;"></i>
            </div>
        </div>
        <div class="panel-body" id="frameBody" style="margin: 0px; padding:0px;">
            <span id="a"></span>
            asdfasfd
        </div>
    </div>
</body>
</html>
文章标签：
前端开发
JavaScript
关键词：
node.js js
JavaScript拖动
JavaScript窗口
边框JavaScript
JavaScript实现
xland
目录
相关文章
六卿
|
21天前
|
存储 JavaScript 前端开发
webSocket+Node+Js实现在线聊天（包含所有代码）
文章介绍了如何使用WebSocket、Node.js和JavaScript实现在线聊天功能，包括完整的前端和后端代码示例。
六卿
88 0
六卿
|
23天前
|
JavaScript 前端开发 开发工具
五子棋小游戏（JS+Node+Websocket）可分房间对战
本文介绍了通过JS、Node和WebSocket实现的五子棋游戏，支持多人在线对战和观战功能。
六卿
24 1
五子棋小游戏（JS+Node+Websocket）可分房间对战
bruce_xiaowei
|
5天前
|
人工智能 JavaScript 前端开发
使用Node.js模拟执行JavaScript
使用Node.js模拟执行JavaScript
bruce_xiaowei
11 2
何雨晨
|
5天前
|
消息中间件 JavaScript 前端开发
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
何雨晨
17 1
六卿
|
23天前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果，包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
六卿
32 0
JS配合CSS3实现动画和拖动小星星小Demo
游客fz577umxdejsg
|
2月前
|
JSON JavaScript 前端开发
JS的无限可能： 前端 精妙DOM技巧至Node.js的服务端
JS的无限可能： 前端 精妙DOM技巧至Node.js的服务端
游客fz577umxdejsg
23 4
热爱技术的小郑
|
2月前
|
缓存 JavaScript 前端开发
成功解决：npm 版本不支持node.js。【 npm v9.1.2 does not support Node.js v16.6.0.】
这篇文章介绍了如何解决npm版本与Node.js版本不兼容的问题，提供了查看当前npm和Node.js版本的步骤，以及如何根据Node.js版本选择合适的npm版本并进行升级的详细指导。
热爱技术的小郑
186 0
成功解决：npm 版本不支持node.js。【 npm v9.1.2 does not support Node.js v16.6.0.】
游客zi3qmblbcdexu
|
2月前
|
机器学习/深度学习 JavaScript
node.js实现遍历所有文件夹里面的js文件，提取所有的url
node.js实现遍历所有文件夹里面的js文件，提取所有的url
游客zi3qmblbcdexu
118 11
土木林森
|
2月前
|
JavaScript 前端开发 API
全栈开发革命来临！Vue.js与Node.js联手，打造前后端无缝对接的奇迹之作！
【8月更文挑战第30天】在Web开发领域，前后端分离与协作至关重要。Vue.js以其轻量级和易用性深受前端开发者喜爱，而Node.js则以高性能和事件驱动特性在后端领域崭露头角。二者结合开启了全栈开发新篇章，通过RESTful API或GraphQL实现高效稳定通信。本文以示例说明如何使用Vue.js和Node.js构建全栈应用，从前端Vue组件到后端Express服务器，展示了数据获取与展示的全过程。这种组合提供了一种高效简洁的全栈开发方案，使开发者能更专注于业务逻辑实现。
土木林森
106 0
游客jjw5lou74ja6k
|
2月前
|
缓存 JavaScript 前端开发
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法（NodeJS版本）
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法（NodeJS版本）更新时间（2020-10-29）
游客jjw5lou74ja6k
53 0