先看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>
分享到：
相关推荐
本文实例为大家分享了JavaScript实现简单拖拽效果的具体代码，供大家参考，具体内容如下 先看实现的效果： 思路：里面用到了三个事件，鼠标按下、移动、松开事件 那么首先创建盒子并且给它赋予css样式 ...
JavaScript实现简单的拖拽效果 本文实例为大家分享了JavaScript实现简单的拖拽效果的具体代码，供大家参考，具体内容如下 1.先搭架子： * { margin: 0; padding: 0; } p { background: skyblue; text-...
Vue 实现一个简单的鼠标拖拽滚动效果插件 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。 github 地址：github.com/qq449245884… 最近在做一个新...
主要为大家详细介绍了JavaScript简单拖拽效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
简单易懂，使用方便（idList是返回拖拽到位置图片的集合）
主要介绍了javascript实现简单的鼠标拖动效果,实例分析了javascript鼠标拖动效果的相关要点与实现技巧,非常具有实用价值,需要的朋友可以参考下
js实现简单图片拖拽效果 本文实例为大家分享了js实现简单图片拖拽效果的具体代码，供大家参考，具体内容如下 //图片需要自己导入 <!doctype html> <html> <head> <meta charset="UTF-8"> 在当前显示区...
效果描述： 一个非常简单易用的拖拽效果，未依赖任何库 全部采用原生js实现，兼容性良好 使用方法： 1、将js部分拷贝到你需要的地方，绑定你要拖拽模块的id即可
第1章 页面特效 ...1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 ...22.11 Ajax效果：可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性...
22.11 Ajax效果：可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性的对象 22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及...
svg.draggy.js是一款可以实现拖拽SVG的JavaScript工具库插件。该SVG工具库插件通过简单的设置，就可以实现任何SVG图形的拖拽互动。你可以设置SVG元素的拖动范围和拖动残影效果。
Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽
主要介绍了JavaScript实现的简单拖拽效果,涉及javascript针对鼠标事件与页面样式的操作技巧,需要的朋友可以参考下
three.js拖拽生成场景简单示例three.js拖拽生成场景简单示例three.js拖拽生成场景简单示例three.js拖拽生成场景简单示例three.js拖拽生成场景简单示例
用JAVASCRIPT实现的可拖拽的树形菜单。效果非常炫酷。使用简单。
主要为大家详细介绍了JavaScript实现简单的拖动效果，具有一定的参考价值，感兴趣的朋友可以参考一下
有一个背景遮罩，支持标题栏的拖拽，在标题栏以外，在标题栏区域之外的区域拖拽是没有效果的，拖拽功能限定，他的拖拽功能被限定在可是可视区域内。 拖曳的思路： 获取鼠标的位置，鼠标移动的时候，获取鼠标