先看js代码
function drag(target, event)
{
// 定义开始拖动时的鼠标位置（相对window座标）
var startX = event.clientX;
var startY = event.clientY;
//定义将要被拖动元素的位置（相对于document座标）
//因为该target的position为absolutely，所以我们认为它的基于的座标系是document
var origX = target.offsetLeft;
var origY = target.offsetTop;
//因为后面根据event的clientX、clientY来获取鼠标位置时，只能获取windows座标系
//的位置，所以需要计算window座标系和document座标系的偏移。
//计算windows座标系和document座标系之间的偏移
var deltaX = startX - origX;
var deltaY = startY - origY;
//为被拖动对象的鼠标移动（mousemove）和鼠标松开（mouseup）注册事件处理器
if (document.addEventListener)
{
//DOM 2事件模型
//在事件捕获阶段绑定事件处理器
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}
else if (document.attachEvent)
{
//IE 事件模型
//设置该元素直接捕获该事件
target.setCapture();
//为该元素鼠标移动时绑定事件处理器
target.attachEvent("onmousemove", moveHandler);
//为鼠标松开时绑定事件处理器
target.attachEvent("onmouseup", upHandler);
//将失去捕获事件当成鼠标松开处理。
target.attachEvent("onlosecapture", upHandler);
}
//阻止事件传播
stopProp(event);
//取消事件默认行为
if (event.preventDefault)
{
//DOM 2事件模型
event.preventDefault( );
}
else
{
//IE事件模型
event.returnValue = false;
}
//鼠标移动的事件处理器
function moveHandler(evt)
{
//对于IE事件模型，获取事件对象
if (!evt) evt = window.event;
//将被拖动元素的位置移动到当前鼠标位置。
//先将window座标系位置转换成document座标系位置，再修改目标对象的CSS位置。
target.style.left = (evt.clientX - deltaX) + "px";
target.style.top = (evt.clientY - deltaY) + "px";
//阻止事件传播
stopProp(evt);
}
//鼠标松开的事件处理器
function upHandler(evt)
{
//对于IE事件模型，获取事件对象
if (!evt) evt = window.event;
//取消被拖动对象的鼠标移动（mousemove）和鼠标松开（mouseup）的事件处理器
if (document.removeEventListener)
{
//DOM 2事件模型
//取消在事件捕获阶段的事件处理器
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if (document.detachEvent)
{
target.detachEvent("onlosecapture", upHandler);
target.detachEvent("onmouseup", upHandler);
target.detachEvent("onmousemove", moveHandler);
target.releaseCapture( );
}
//阻止事件传播
stopProp(evt);
}
//阻止事件传播(该函数可以跨浏览器)
function stopProp(evt)
{
//DOM 2事件模型
if (evt.stopPropagation)
{
evt.stopPropagation( );
}
else
{
//事件模型
evt.cancelBubble = true;
}
}
}
jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>拖动效果</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/drag.js"></script>
</head>
<body>
<!-- 定义被拖动的元素 -->
<div
style="position: absolute; left: 120px; top: 150px; width: 250px; border: 1px solid black;">
<div
style="background-color: #416ea5; width: 250px; height: 22px; cursor: move; font-weight: bold; border-bottom: 1px solid black;"
onmousedown="drag(this.parentNode, event);">
可拖动标题
</div>
<p>
可被拖动的窗口
</p>
<p>
窗口内容
</p>
</div>
</body>
</html>
分享到：
相关推荐
本文将深入探讨如何使用jQuery实现简单的拖拽效果，让你的网页元素能够随心所欲地移动。 首先，拖拽效果的核心在于捕获鼠标事件，包括`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标释放）。...
JavaScript 实现简单的拖拽效果是前端开发中常见的一种交互功能，它可以增强用户的体验，使得用户可以自由地在页面上移动某个元素。以下是如何使用 JavaScript 实现这一效果的详细步骤： 首先，我们需要设置页面的...
总结来说，Drag5是一个专为简化和增强JavaScript拖拽功能设计的框架，它的简易性和灵活性使得开发者能够快速构建出具有高度定制性的拖拽效果，从而提升Web应用的用户体验。通过深入理解Drag5的工作原理和使用方法，...
本文详细介绍了使用JavaScript实现简单拖拽效果的完整过程，包括关键的DOM事件和逻辑处理，适合对前端开发感兴趣的读者学习和参考。 在实现拖拽功能时，通常涉及三个关键的鼠标事件：`mousedown`、`mousemove`和`...
JavaScript 实现简单的拖拽效果是网页交互中常见的一种功能，主要通过监听鼠标事件来实现。在本实例中，我们将分析如何使用 JavaScript 和 CSS 创建一个可拖动的蓝色盒子。 首先，我们需要创建 HTML 结构，这里包含...
一个简单的悬浮球可以由一个`<div>`元素来表示，我们可以通过CSS设置其样式，使其看起来像一个球体： ```html 悬浮球 ``` 接下来，我们需要编写CSS来定义悬浮球的样式，例如圆角、颜色和位置： ```css .ball { ...
对于初学者来说，理解并实现这一功能是掌握JavaScript动态效果的一个重要步骤。 首先，我们需要了解JavaScript事件处理。在JavaScript中，我们可以监听用户的鼠标动作，如`mousedown`（鼠标按键被按下）、`...
首先，标题“懒人原生JavaScript拖拽效果代码”暗示了这是一个简洁且易于使用的解决方案，适用于那些希望快速实现拖拽功能而不想引入额外库的开发者。这个功能的核心在于利用JavaScript事件监听器和DOM操作来模拟...
"js制作简单拖拽效果.zip"这个压缩包文件包含了一个实现基本拖拽功能的示例，适用于网页开发中的各种场景，如布局调整、图片拖放等。下面我们将深入探讨JavaScript实现拖拽效果的关键知识点。 首先，我们需要理解...
"table实现列宽的拖动效果"是一个常见的需求，特别是在数据展示或者数据分析的应用中，用户可能需要自定义表格列的宽度以更好地查看和理解数据。这篇博客文章 "https://jifeng3321.iteye.com/blog/2403674" 提到的...
在拖拽效果中，用户可以直观地将一行或多行数据从一个 Datagrid 拖动到另一个 Datagrid，实现数据的移动或复制。 实现这个效果的关键技术点包括： 1. **jQuery 插件扩展**：EasyUI 是基于 jQuery 构建的，因此实现...
### JavaScript 实现简单图片拖拽效果 #### 一、引言 在Web开发中，交互式体验对于提升用户界面友好度至关重要。其中一项常见的交互功能就是拖拽效果，特别是图片的拖拽。本文将深入探讨如何使用原生JavaScript来...
这个jQuery插件为网页开发提供了一个易于使用的、可拖动的模式窗口解决方案，通过简单的API就能实现丰富的交互功能。结合HTML、CSS和JavaScript，开发者可以轻松地将这个插件集成到自己的项目中，提升网站的用户体验...
"svg.draggy.js" 是一个专门针对SVG元素设计的JavaScript工具库插件，它的主要目标是提供简单易用的方法来实现SVG图形的拖拽功能。这个插件的核心特性包括： 1. **拖拽互动**：svg.draggy.js使得SVG元素具备拖动...
在这个“javascript 实现的层拖动简单实例”中，我们将探讨如何利用JavaScript来让一个div元素（通常被称为浮动层或浮窗）具有拖动能力。 首先，我们要理解`div`在HTML中的角色。`div`是一个块级元素，它允许开发者...
这个实例展示了如何通过JavaScript来创建一个简单的拖动元素的功能，让用户可以自由地在页面上移动指定的元素。以下是对这个实例的详细解析： 首先，我们需要一个HTML结构，包含一个可以被拖动的元素。在这个例子中...
这里使用了一个简单的逻辑来判断鼠标是否处于有效拖拽区域内，以确保进度条的状态不会因为超出范围的拖拽动作而发生错误的变化。 #### 总结 本文通过一个具体的示例介绍了如何使用JavaScript结合HTML5的Canvas API...
在这个“非常简单的网页拖拽效果js代码”中，我们可以预见到这是一个简单的JavaScript实现，它可能包含了基本的事件监听、坐标计算以及DOM元素的位移操作。 首先，拖拽效果的核心在于捕获用户的鼠标或触摸事件。在...
在网页开发中，拖放（Drag and Drop）功能是一种常见的交互设计，允许用户通过鼠标将一个元素抓取并移动到另一个位置。JavaScript 提供了实现这一功能的强大支持，特别是对于div、table等网页元素的拖动操作。在这个...