一直以来都认为拖拽是一件很神奇的事情，今天终于有机会了解一下它的原理，这只是 一个简单的例子，还需要很多的优化、改进。
基本原理如下：
拖拽状态 = 0
鼠标在元素上按下的时候{
拖拽状态 = 1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
}
鼠标在元素上移动的时候{
如果拖拽状态是0就什么也不做。
如果拖拽状态是1，那么
元素y = 现在鼠标y - 原来鼠标y + 原来元素y
元素x = 现在鼠标x - 原来鼠标x + 原来元素x
}
鼠标在任何时候放开的时候{
拖拽状态 = 0
}
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag and Drop</title>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript">
$(function(){
var state = {
draging: false,
mouseX: 0,
mouseY: 0,
objX: 0,
objY: 0
};
$("div").bind("mousedown", state, down).bind("mousemove", state, move).mouseover(over);
$(document).bind("mouseup", state, up);
});
//处理鼠标被按下事件
function down(event){
event.data.draging = true;
event.data.mouseX = parseInt(event.clientX);
event.data.mouseY = parseInt(event.clientY);
event.data.objX = parseInt($(this).css("top"));
event.data.objY = parseInt($(this).css("left"));
}
//处理鼠标移动事件
function move(event){
state = event.data;
if (state.draging) {
$(this).css("top", event.clientY - state.mouseX + state.objY)
$(this).css("left", event.clientX - state.mouseY + state.objX)
}
}
//处理鼠标被在拖拽元素上
function over(event){
$(this).css("cursor", "move")
}
//处理鼠标被放开事件
function up(event){
event.data.draging = false;
}
</script>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: #999999;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
分享到：
相关推荐
### 电机拖动原理知识点详解 #### 一、课程性质与任务 - **课程性质**：电机原理及拖动课程是一门重要的专业基础课或技术基础课，在工业电气自动化领域中占据核心地位。该课程旨在为学生提供电机原理及其拖动技术...
JavaScript动画模拟拖拽原理是网页交互中的一个常见技术，它允许用户通过鼠标操作页面上的元素，使其仿佛可以被“拖动”至任意位置。在本文中，我们将深入探讨这一技术的实现方法，并针对可能出现的问题进行优化。 ...
《电力拖动原理》第一章主要探讨的是直流拖动控制，这一章节主要针对直流电动机的调速方法及其在电力拖动自动控制系统中的应用。直流电动机因其优良的启动、制动性能以及广泛的调速范围，被广泛应用在需要频繁调速和...
电机拖动原理课程设计是工业自动化专业的重要实践环节，旨在让学生深入理解电机与电力拖动系统的基本原理，并学会将理论知识应用于实际工程问题。在这个设计中，学生需要掌握直流电机的主要技术参数，如功率、速度、...
《直流电力拖动原理》是理解电力拖动系统的核心理论，尤其在2009年数学建模A问题中显得尤为重要。电力拖动系统主要由电源、控制设备、工作机构和传动机构以及电动机四部分构成。直流电动机在其中扮演关键角色，形成...
应该对大家有参考价值 如果想成为电机拖动高手的不放开这里看看，应该蛮有用的。
《彭鸿才电机原理及拖动部分答案》涵盖了电机学中的关键理论与实践问题，旨在帮助学习者理解和解决电机设计、分析与控制中的各种挑战。电机原理是电气工程的基础，而拖动部分则是电机在实际应用中的核心内容，涉及...
"电力拖动控制线路图及原理分析" 电力拖动控制线路图及原理分析是电气自动化技术中的一种重要控制方法。它通过控制电路的设计和分析来实现电动机的启动、停止、正转、反转、自动往返控制等功能。本文将对电力拖动...
当鼠标在table两列头之间时，鼠标变成双箭头，拖动鼠标可以调节table列的宽度。
《电机原理与拖动》是一门重要的工程学科，主要研究电动机的工作原理、性能分析以及在实际应用中的拖动系统。这份"电机原理及拖动复习试题"是针对这门课程精心编纂的复习资料，旨在帮助学习者巩固理论知识，提高解决...
刘锦波教授的习题答案提供了详细的解题步骤和解析，有助于加深对电机与拖动原理的理解。 9. **勘误**：教材中的错误可能会误导学习者，勘误文档的存在可以及时纠正这些错误，提高学习的准确性。 通过学习《电机与...
在`JavaScript实现DIV弹出窗口的拖拽效果.txt`文件中，可能包含了一些使用该插件的示例代码或者对拖拽原理的进一步解释。例如，如何实例化一个可拖动的div元素，以及如何在页面加载后调用这个插件。 总的来说，...
"电机原理与拖动基础课后题答案" 电机原理与拖动基础是电机工程领域中的重要基础概念，本文通过对电机原理与拖动基础的详细解释，并结合课后题答案，旨在帮助读者深入理解电机原理与拖动基础的相关知识点。 一、换...
### 背包系统拖拽基本原理源码与使用方法 #### 一、背包系统拖拽基本原理概览 在游戏开发中，背包系统是非常常见的一种功能模块，它主要用于管理玩家角色所携带的各种物品。为了使游戏体验更加流畅自然，背包系统...
这表明该书不仅包含了教材中的理论知识，还提供了对习题、案例分析或实验操作的解答，旨在帮助学生深化对电机拖动原理和技术的理解，提升解决实际问题的能力。 电机拖动是电气工程与自动化领域的重要组成部分，它...
其中，拖拽布局（Draggable Layout）是一种常见的增强用户体验的技术，它允许用户通过鼠标直接拖动元素来改变页面布局。本文将深入探讨如何利用jQuery实现这样的功能。 **一、jQuery简介** jQuery是一款轻量级的...
这些功能对于学生加深对电机拖动原理和控制效果的理解具有重要的辅助作用。 7. 教学改革需求：当前应用型本科人才培养模式下，更强调理论与实际应用的结合，对课程内容进行精实化调整。电机拖动辅助教学平台的设计...
1. 文件拖拽原理：文件拖拽依赖于操作系统提供的API（应用程序接口）来实现。在Windows中，这涉及到Shell拖放API；在macOS中，是使用Carbon或Cocoa框架；而在Linux系统中，通常涉及X Window System的Drag and Drop...
《电机原理与拖动》是电气工程及其自动化领域的一门核心课程，主要研究电机的工作原理、性能分析以及在工业生产中的应用。这份“彭鸿才直流电力拖动选择题及答案”文档，作为复习资料，将帮助我们深入理解并掌握这门...