拖拽------一个小窗口

最新推荐文章于 2022-08-27 20:23:10 发布
最新推荐文章于 2022-08-27 20:23:10 发布
阅读量110 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youyouyouyou44/article/details/82457445
版权

写了一个拖拽窗口，项目中会用到，所以就当作一个笔记，要用直接来复制n.n
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>拖拽</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .moveBox{
            width: 600px;
            height: 400px;
            position: absolute;
            left: 100px;
            top: 100px;
            border:2px solid #000;
            display: none;
        }
        .moveBox .moveBox-header{
            width:100%;
            height:30px;
            background-color: #cccccc;
        }
        .moveBox .moveBox-close{
            padding:0 6px;
            position:absolute;
            right:8px;
            top:8px;
        }
        #open{
            font-size:30px;
        }
    </style>
    <script src="js/jquery-1.7.2.js"></script>
    <script>
        $(function(){
            var moveBox = $(".moveBox");
            var moveHeader = $(".moveBox-header");
            moveHeader.on("mousedown",function(e){
                var disX = e.clientX - moveBox.offset().left;
                var disY = e.clientY - moveBox.offset().top;
                function move(e){
                    var l = e.clientX - disX;
                    var t = e.clientY - disY;
                    moveBox.css({"left":l,"top":t});
                }
                function up(){
                    $(document).off("mousemove",move);
                    $(document).off("mouseup",up);
                }
                $(document).on("mousemove",move);
                $(document).on("mouseup",up);
            });
            $(".moveBox-close").on("click",function(){
                moveBox.css({"display":"none"});
            });
            $("#open").on("click",function(){
                moveBox.css({"display":"block"});
            });
        });
    </script>
</head>
<body>
<input type="button" value="open" id="open">
<div id="moveBox" class="moveBox">
    <div class="moveBox-header"></div>
    <input class="moveBox-close" type="button" value="×"/>
    <div class="moveBox-content"></div>
</div>
</body>
</html>

效果图：

3872133-0729500a53f0d536.png
Paste_Image.png

点击小窗口灰色的部分可以拖拽窗口，如果想要拖拽哪里都能移动窗口，也可以把事件直接加在窗口上，但是如果窗口里面有input type = “text” 等输入框的时候，就不能获取焦点了，当然也可以给点击事件加上获取焦点的代码，就能输入了，但是输入框里的文字没有办法用鼠标选中，有点奇怪。不知道有没有哪位大神可以解决这个问题的，感激不尽呐

youyou_builder
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Q-dir多窗口文件整理工具
10-30
Q-dir多窗口文件整理工具，可以最多有四个窗口，可以很方便的在窗口之间进行拖动。特别是在网络映射驱动器挂载的目录，有无与伦比的优势。可以去https://blog.csdn.net/weixin_39247141/article/details/109371054 ...
拖拽窗口实现
qq_38233172的博客
05-03 326
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>拖拽窗口实现</title> <style> * { margin: 0; paddin...
简单的拖拽窗口实现
a1272146的博客
05-21 1055
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;拖拽窗口&lt;/title&gt; &lt;style&gt; *{margin: 0px;padding: 0px;} html {wi
分享一个窗口拖拽功能小扩展
小陈的博客
08-27 270
学习编程可以追溯到高中时代，回首望去20多年，有遗憾，因为没能真正从事这方面职业，但是兴趣使然一直没有放弃，大大小小项目也开发过，独立的合作的都有。突发奇想也许我也能写写东西，是分享，也是学习，更是想交朋友。今天分享一个窗口拖拽功能。希望大家喜欢！我应该可以称为非专业的程序员，所有技术全靠自学，纯纯的爱好。我本者不太深究，够用即可的方式，很多东西没学到位，仅够使用。所以以上代码中肯定有很多需要改的地方。这也是首次分享与大家。还请大家批评指正，我会虚心学习。...
js实现窗口拖拽效果
kylvia的专栏
03-16 7882
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { width: 300px; background-color: green; position: absolute; } h2{ width:100% } </style> </
可拖拽窗口
panghuyou的博客
11-20 180
将代码拖到这个上 using System.Collections; using System.Collections.Generic; using UnityEngine; //首先在命名空间里写这个 using UnityEngine.EventSystems; public class MoveBag : MonoBehaviour, IDragHandler { //然后获取那个的中心点 public Canvas canvas; RectTransform currentRec.
react-reactdnr采用Reactjs构建的可拖动和可调整大小的窗口
08-15
在"react-dnr"项目中，我们看到一个专门针对React.js设计的组件，允许用户创建可拖动和可调整大小的窗口。这样的功能对于创建桌面式的Web应用或者需要高度交互性的网页非常有用。 **React组件化开发** React的核心...
react-reactdraggableReact可拖拽组件
08-15
`react-draggable`是Mza Briskie开发的一个开源项目，它允许我们将任何React组件转化为可拖动的元素，极大地增强了应用的用户体验。在本文中，我们将深入探讨`react-draggable`组件及其核心概念、用法和最佳实践。 ...
可拖拽布局组件easyui-portal
12-24
`EasyUI-Portal`是一个基于JavaScript和CSS的开源框架，专为创建可定制、可拖拽的布局而设计，它使得开发人员能够轻松构建以用户为中心的Web应用程序，实现信息的集中访问。下面我们将深入探讨`EasyUI-Portal`的核心...
Java反编译工具之jd-gui安装包
05-26
4. **加载.class文件**：JD-GUI启动后，界面会显示一个空白的源代码窗口。你可以通过菜单栏的“File” -> “Open Class...”或者拖拽.class文件到界面上来加载需要反编译的文件。 5. **查看源代码**：加载成功后，...
最简单的可拖拽窗口教程
iteye_16167的博客
04-07 217
弹出窗口，并且可以拖拽，可以关闭，这个是很多时候都用得到的效果，特别是教师做课件的时候。 但是菜鸟如我者是不会使用窗口组件的，无他，因为实在是太麻烦，一来颜色不对的话不会换，二来看看说明要关闭还要按什么侦听事件什么的，看得我头都大啦。 下载外国的高级窗口组件吧，又不会使。哎~~~~~ 为了广大跟我一样菜的鸟，我弄了个自定义窗口的简单教程，希望各位高手不要笑话才好。 1.首先做一个窗口的...
鼠标拖拽窗口效果（不允许拖出屏幕的可视区域）
皮卡丘の开发之路
08-25 7052
鼠标拖拽窗口效果（不允许拖出屏幕的可视区域）
Qt实现窗口整体拖拽功能.
热门推荐
闭上左眼看世界的博客
11-26 1万+
我们都知道，当我们鼠标点击并移动应用程序的上边框时，窗口才会整体移动，但有些窗口，你点击移动其他部分，也可以让窗口跟着鼠标移动，这里就教你如何整体移动窗口. 其实实现这样的功能很简单，只需要重写以下的3个鼠标函数即可. //"c.h" #ifndef C_H #define C_H #include &lt;QtWidgets/QWidget&gt; #include "ui_c.h" ...
JS(拖拽窗口)
qq_45621713的博客
09-29 311
实现页面窗口的拖拽效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #title{ border: 3px solid g...
python使用win32库模拟拖拽文件发给指定窗口
kaiixing的专栏
12-22 3072
最近要用python模拟人的操作给窗口发送拖拽文件的消息，网上搜了一大圈也没搜到现成可用的代码。幸好以前做过vc开发，熟悉点win32编程，于是装上vs和msdn，从消息WM_DROPFILES查起，慢慢得实现了这个功能。 WM_DROPFILES是向win32窗口拖拽一个文件松开鼠标左键后会触发发送给窗口的消息，前提是目标窗口是支持拖拽消息的响应，在win32中是通过窗口样式：...
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
resize-窗口大小被调整
04-25
在计算机图形界面中，resize（调整大小）是指改变窗口的尺寸。当用户拖动窗口的边缘或角落时，窗口的大小会相应地改变。这个过程被称为窗口的resize。 在窗口resize的过程中，通常会触发一些事件和操作。这些事件和操作可以用来重新布局窗口中的元素，以适应新的窗口尺寸。例如，当窗口变大时，可以重新计算和调整布局，使得内容能够更好地适应新的窗口大小。当窗口变小时，可能需要隐藏一些元素或者使用滚动条来显示内容。 在编程中，我们可以通过监听窗口resize事件来捕捉窗口大小的改变，并在事件处理函数中进行相应的操作。具体的实现方式会根据使用的编程语言和图形界面库而有所不同。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值