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

首先，我们需要明白，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 操作方法，加入一些判断条件即可。