jquery 可拖拽的窗体控件实现代码

yizhihongxing

首先,我们需要明白,jquery 是一个 JavaScript 库,它提供了方便的 DOM 操作封装,特别是对于 HTML 文档的遍历和操作、事件的处理、动画和 Ajax 前端数据交互等方面。因此,如果我们想要实现可拖拽的窗体控件,使用 jQuery 会让我们轻松地完成这个需求。

下面是代码的具体实现过程:

实现可拖拽的 div 元素

HTML 代码

<div id="dragDiv" style="background-color: #aaa; width: 280px; height: 200px; position: absolute; left: 200px; top: 150px;">
  <h4 style="cursor: move;">拖动这个 div 元素</h4>
  <div style="height: 160px; overflow: auto;">
    <p>这里是可滚动的内容区域</p>
  </div>
</div>

注意到在 HTML 结构中,我们给 div 元素添加了一个 h4 元素,这是我们后续所要拖动的元素。

CSS 代码

#dragDiv {
  cursor: move;
}

这里简单地修改了光标样式。

JavaScript 代码

// 移动方块
function drag() {
  var odiv = document.getElementById('dragDiv');
  var windowWidth = document.documentElement.clientWidth;
  var windowHeight = document.documentElement.clientHeight;
  var divWidth = odiv.offsetWidth;
  var divHeight = odiv.offsetHeight;
  odiv.onmousedown = function(event) {
    var event = event || window.event;
    var disX = event.clientX - odiv.offsetLeft;
    var disY = event.clientY - odiv.offsetTop;
    document.onmousemove = function(event) {
      var event = event || window.event;
      var moveLeft = event.clientX - disX;
      var moveTop = event.clientY - disY;
      if (moveLeft < 0) {
        moveLeft = 0;
      } else if (moveLeft > windowWidth - divWidth) {
        moveLeft = windowWidth - divWidth;
      }
      if (moveTop < 0) {
        moveTop = 0;
      } else if (moveTop > windowHeight - divHeight) {
        moveTop = windowHeight - divHeight;
      }
      odiv.style.left = moveLeft + 'px';
      odiv.style.top = moveTop + 'px';
    };
    document.onmouseup = function() {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };
}
drag();

在 JavaScript 代码中,我们定义了一个 drag 函数,通过 id 获取 div 元素,只有在拖动 h4 元素的时候才能移动 div 元素。同时,我们获取了浏览器窗口的宽度、高度,以及 div 元素的宽度和高度,用于后续计算限制拖动的范围。

后续,我们通过 onmousedown 事件,获取鼠标点击时鼠标距离元素左侧和顶部的距离。同时,通过 onmousemove 事件,动态修改 div 元素的 left 和 top,实现拖动。这里还有一个限制条件,是当元素拖动到窗口边缘时停止拖动。

最后,通过 onmouseup 事件,清除掉 onmousemove 和 onmouseup 的事件绑定。

这样我们就成功实现了一个简单的可拖拽的 div 元素。

实现可拖拽的窗体

HTML 代码

<div id="dragWindow" class="drag-window">
  <div class="drag-window-title">
    <h3>绘画板</h3>
    <button class="close-button">X</button>
  </div>
  <div class="drag-window-content">
    <p>这里是窗口的内容区域</p>
  </div>
</div>

HTML 结构中,我们先定义了一个 div 元素,它作为整个窗体的容器。同时,我们还定义了一个 div 元素,里面放了窗体标题和关闭按钮。

CSS 代码

.drag-window {
  background: #fff;
  border: 1px solid #ccc;
  width: 300px;
  height: 200px;
  padding: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -100px;
  z-index: 99999;
}

.drag-window-title {
  background: #ccc;
  padding: 8px;
  cursor: move;
}

.drag-window-content {
  height: 160px;
  overflow: auto;
}

在 CSS 代码中,我们对窗体进行了样式调整。其中,drag-window 和 drag-window-title 的内容可能更容易让人理解。

JavaScript 代码

// 移动窗口
function dragWindow() {
  var odiv = document.getElementById('dragWindow');
  var windowWidth = document.documentElement.clientWidth;
  var windowHeight = document.documentElement.clientHeight;
  var divWidth = odiv.offsetWidth;
  var divHeight = odiv.offsetHeight;
  var moveX;
  var moveY;
  var isDrag = false;
  var oTitle = odiv.getElementsByClassName('drag-window-title')[0];
  // 拖动
  oTitle.onmousedown = function(event) {
    var event = event || window.event;
    var disX = event.clientX - odiv.offsetLeft;
    var disY = event.clientY - odiv.offsetTop;
    isDrag = true;
    odiv.style.cursor = 'move';
    document.onmousemove = function(event) {
      if (!isDrag) return;
      var event = event || window.event;
      var x = event.clientX - disX;
      var y = event.clientY - disY;

      if (x < 0) {
        x = 0;
      } else if (x > windowWidth - divWidth) {
        x = windowWidth - divWidth;
      }
      if (y < 0) {
        y = 0;
      } else if (y > windowHeight - divHeight) {
        y = windowHeight - divHeight;
      }

      odiv.style.left = x + 'px';
      odiv.style.top = y + 'px';
    };
    // 释放
    document.onmouseup = function() {
      isDrag = false;
      odiv.style.cursor = 'default';
    };
  };
  // 点击关闭按钮
  odiv.getElementsByClassName('close-button')[0].onclick = function() {
    odiv.style.display = 'none';
  };
}
dragWindow();

这里代码逻辑和 div 元素拖动类似,只是需要获取更多位置信息,同时在拖动的同时进行判断,当拖动到窗口边缘时不再移动。后续还添加了关闭按钮的方法,这里不再介绍。

总的来说,完成一个可拖拽窗体并不是很困难,只需要合理运用 jQuery 提供的 DOM 操作方法,加入一些判断条件即可。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jquery 可拖拽的窗体控件实现代码 - Python技术站

(0)
上一篇 2023年6月27日
下一篇 2023年6月27日

相关文章

  • Javascript 中 var 和 let 、const 的区别及使用方法

    当然!下面是关于\”JavaScript中var和let、const的区别及使用方法\”的完整攻略,包含两个示例说明。 … … JavaScript中var和let、const的区别及使用方法 在JavaScript中,var、let和const是用于声明变量的关键字。它们在作用域、变量提升和可变性方面有一些区别。下面是它们的详细解释: … ..…

    other 2023年8月20日
    00
  • linux删除环境变量步骤详解

    让我来详细讲解一下“Linux删除环境变量步骤详解”的完整攻略。 1. 查看环境变量 在删除环境变量之前,我们需要先查看当前系统的环境变量,可以使用echo命令输出$PATH环境变量的值。 echo $PATH 2. 编辑profile文件 如果要删除全局环境变量,我们需要编辑/etc/profile文件,输入以下命令打开该文件: sudo vim /etc…

    other 2023年6月27日
    00
  • Excel如何在单元格内批量加前缀或后缀?

    当你需要在Excel中批量给单元格添加前缀或后缀时,可以使用以下步骤: 首先,打开Excel并选择你要操作的工作表。 选中你要添加前缀或后缀的单元格范围。你可以使用鼠标拖动来选中多个单元格,或者按住Ctrl键并单击选择多个单元格。 在Excel的顶部菜单栏中,点击\”开始\”选项卡。 在\”编辑\”组中,找到并点击\”查找和替换\”按钮。这将打开一个弹出窗口…

    other 2023年8月5日
    00
  • php中关于时间的用法

    PHP中关于时间的用法 在网站开发中,经常需要使用时间相关的函数来进行时间的格式化、日期的处理等操作。作为PHP的站长,掌握PHP中关于时间的用法是非常重要的。 时间戳 在PHP中,时间通常被表示为时间戳,它是一个整数值,表示从1970年1月1日0时0分0秒之间的秒数。可以使用time()函数获取当前时间戳,例如: $timestamp = time(); …

    其他 2023年3月28日
    00
  • Android代码块执行顺序分析总结

    下面详细讲述一下“Android代码块执行顺序分析总结”的攻略: 1. 概述 首先,代码块是指在类中而不是方法中定义的,它们用于进行一些初始化操作。 Android中的代码块主要分为两种:静态代码块和实例代码块。 静态代码块是指使用 static 修饰的代码块,一般用于执行一些静态变量的初始化操作;实例代码块是指不使用 static 修饰的代码块,一般用于执…

    other 2023年6月26日
    00
  • 详解如何热重启golang服务器

    下面是关于如何热重启Golang服务器的详细攻略: 简介 热重启指在运行中的程序重启时,不需要中断或停止该程序的服务,而是在后台保持其服务的情况下,重新加载代码和配置文件,并使新代码和文件生效。 Golang 提供了一些方便的库和工具,可以让我们实现 HTTP 服务器的热重启,使得服务的高可用性和无停机更新成为可能。 方式1:graceful gracefu…

    other 2023年6月27日
    00
  • Java编程子类能否重写父类的静态方法探索

    让我们来探索一下Java编程中子类是否能够重写父类的静态方法吧! 1. 静态方法的特点 首先,我们需要了解静态方法的一些特点。静态方法是一种属于类级别的方法,其作用就是提供单一的全局访问点。不同于普通方法,静态方法是无法被实例化对象所调用,只能通过类名来访问和使用。因此,静态方法的调用方式会简单和方便许多。 2. 子类重写父类静态方法 从以上了解中我们可以看…

    other 2023年6月26日
    00
  • androidstudio上如何使用git对gitee上的远程仓库进行操作

    当您在Android Studio中使用Git对Gitee上的远程仓库进行操作时,需要进行以下步骤: 步骤1:在Gitee上创建远程仓库 首先,我们需要在Gitee上创建一个程仓库。在Gitee上登录并进入仓库页面,点击“新建仓库”按钮,填写仓库名称和描述,选择仓库为“公开仓库”,然后点击“创建仓库”按钮即可。 步骤2:在Android Studio中打开项…

    other 2023年5月9日
    00
合作推广
合作推广
分享本页
返回顶部