一直以来都认为拖拽是一件很神奇的事情，今天终于有机会了解一下它的原理，这只是 一个简单的例子，还需要很多的优化、改进。
基本原理如下：
拖拽状态 = 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>
分享到：
相关推荐
电机拖动课件 ，比较详细，课件做的通俗易懂
比如拖动排序，弹出框拖动移动等等 拖拽的流程动作 1、鼠标按下 会触发onmousedown事件 2、鼠标移动 会触发onmousemove事件 3、鼠标松开 会触发onmouseup事件 拖拽原理 1.鼠标按下+鼠标移动 = 拖拽-------事件...
直流拖动控制，这是某大学的教学资源，很难得哦！
电机拖动课程设计，诸多不足望朋友们提出宝贵意见
应该对大家有参考价值 如果想成为电机拖动高手的不放开这里看看，应该蛮有用的。
2009年数学建模A最新参考资料，可以看看啊。马上就没时间啦
当鼠标在table两列头之间时，鼠标变成双箭头，拖动鼠标可以调节table列的宽度。
拖拽原理：按下拖拽元素后开始监听文档中鼠标移动事件，然后再监听鼠标松开事件；鼠标移动时，元素div要随着鼠标一起移动，需要计算元素div位移的距离（移动的距离=鼠标离可视窗口的位置 – 鼠标在div中相对于左上角...
电力拖动控制线路图及原理分析.pdf
本文主要对JavaScript动画模拟拖拽原理进行分析，步骤清晰，简短的文字，深入的理解。需要的朋友可以看下
彭鸿才电机原理及拖动部分答案，希望对大家有帮助，共同探讨，多多学习！
熟悉拖动原理。 3.3.坐标信息传输用AES或DES进行加密。 4.实现思路 4.1点击文字图片验证码：https://blog.csdn.net/m0_38138879/article/details/117552010 4.2拖动图片验证码：...
电机原理与拖动基础课后题答案
清华大学电机原理及拖动(彭鸿才版) ppt
该软件适合于复习《电机原理与拖动》，一些课本中的重要知识点以选择题的形式给出，帮助大家梳理课本知识点，是上次试题的增添部分。
来自中国矿业大学很不错的超有用的 两套无答案
该UI背包系统拖拽基本原理讲解了背包系统的基本用法，方便实现背包物品的拖拽，包含全部源码截图与使用方法
该软件适用于复习《电机原理与拖动》，以选择题的形式给出了一些课本中的重要知识点，希望对您有所帮助。
描述机器人开环拖动示教、闭环拖动示教的基本方法和原理。