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

<!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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏vue学习

偏移量、客户区大小、视口大小、滚动大小、确定元素大小

1、偏移量 先讲几个偏移量属性: offsetHeight:元素在垂直方向上占用的空间大小;相当于border-top+padding-top+height...

1372
来自专栏c#开发者

ios-upload file with formdata onsumed web api 代码片段

代码 - - (IBAction)uploadAction:(id)sender {     NSString *urlstring=self.urlTextF...

3306
来自专栏c#开发者

ios-zbar scanview 根据扫描区域切割图片

在scanview中添加扫描区域 ZBarReaderViewController *reader = [ZBarReaderViewController ne...

3527
来自专栏从流域到海域

Python 异常类继承树

BaseException SystemExit KeyboardInterrupt GeneratorExit Exception StopIte...

1979
来自专栏c#开发者

IOS5开发-控件位置适应屏幕旋转代码

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toOrientation  ...

36311
来自专栏河湾欢儿的专栏

文档宽高及窗口事件

onscroll:当滚动条滚动的时候触发 onresize:当窗口大小发生改变的时候触发

912
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaScript计算水仙花数【可自定义范围】

水仙花数百科 水仙花数是指一个 n 位正整数 ( n≥3 ),它的每个位上的数字的 n 次幂之和等于它本身。(例如:1^3 + 5^3+ 3^3 = 153) ...

3647
来自专栏一“技”之长

iOS(CGGeometry)几何类方法总结 原

CGPoint CGPointMake(CGFloat x, CGFloat y);

1072
来自专栏一个小程序员的成长笔记

在不同浏览器都实用的各窗口大小获取方法

// 浏览器窗口 var w= document.documentElement.clientWidth || document.body.clie...

3618
来自专栏杨龙飞前端

scrollto 到指定位置

3655

扫码关注云+社区

领取腾讯云代金券