JavaScript 拖放效果系列一
程序员文章站
2022-07-14 13:49:32
...
原文来自:http://www.cainiao8.com/web/js_examples/13_tuozhuai.html
为什么要实现这个拖拽效果?
菜鸟一直比较好奇JavaScript的拖拽是怎么实现的,刚刚进入大四,闲时间又多了,突然想起一探JS拖拽的究竟。百度搜索到了蓝色的一篇文章“怎么用javascript进行拖拽”,英文原文为“How to Drag and Drop in JavaScript”。文章比我想象的复杂,仅仅是获得鼠标事件的x、y的绝对位置就写了一页(我的想法是拖拽根本就不需要得到准确的鼠标绝对位置),还要考虑浏览器之间的兼容性。最郁闷的是测试了一下,第一个显示鼠标位置的例子在IE下和FF下就不一致了。
索性决定按照自己的思路来实现拖拽效果。很幸运,试验成功了,也就有了下面的代码。
实现拖拽的基本思路
拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的top和left 的改变。当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的。
根据以上的基本原理,我写出了下面的基本思路。感觉代码还是比较短的,
将以上思路翻译成JS代码就可以实现拖拽的效果了。
JavaScript代码
HTML代码
JS拖拽的实际效果
点击进入示例网页
缺点与待完善之处
这个拖拽的例子还相当不完善,不过已经实现了拖拽最根本的核心。想到的待完善部分有下面几点:获得元素的x与y坐标的方法在本文里简化掉了;本文只让一个固定的元素具有了拖拽功能,灵活性太差;鼠标样式没有变换;快速的“乱甩拖拽”有一定概率出现问题。其中最后一个问题暂时不知道怎么解决,前面三个比较好办。
JavaScript拖拽系列
1. JavaScript拖拽
2. JavaScript拖拽2——多元素、分离JS
3. JavaScript拖拽3——解决快速拖拽的问题
4. JavaScript拖拽4——获得元素的位置
5. JavaScript拖拽5——性能优化
6. JavaScript拖拽6——修复错误
为什么要实现这个拖拽效果?
菜鸟一直比较好奇JavaScript的拖拽是怎么实现的,刚刚进入大四,闲时间又多了,突然想起一探JS拖拽的究竟。百度搜索到了蓝色的一篇文章“怎么用javascript进行拖拽”,英文原文为“How to Drag and Drop in JavaScript”。文章比我想象的复杂,仅仅是获得鼠标事件的x、y的绝对位置就写了一页(我的想法是拖拽根本就不需要得到准确的鼠标绝对位置),还要考虑浏览器之间的兼容性。最郁闷的是测试了一下,第一个显示鼠标位置的例子在IE下和FF下就不一致了。
索性决定按照自己的思路来实现拖拽效果。很幸运,试验成功了,也就有了下面的代码。
实现拖拽的基本思路
拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的top和left 的改变。当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的。
根据以上的基本原理,我写出了下面的基本思路。感觉代码还是比较短的,
拖拽状态 = 0 鼠标在元素上按下的时候{ 拖拽状态 = 1 记录下鼠标的x和y坐标 记录下元素的x和y坐标 } 鼠标在元素上移动的时候{ 如果拖拽状态是0就什么也不做。 如果拖拽状态是1,那么 元素y = 现在鼠标y - 原来鼠标y + 原来元素y 元素x = 现在鼠标x - 原来鼠标x + 原来元素x } 鼠标在任何时候放开的时候{ 拖拽状态 = 0 }
将以上思路翻译成JS代码就可以实现拖拽的效果了。
JavaScript代码
<script type="text/javascript"> var dragging = false; var test; var mouseY; var mouseX; window.onload = function(){ test = document.getElementById("test"); test.onmousedown = down; test.onmousemove = move; document.onmouseup = up; test.style.position = "relative"; test.style.top = "0px"; test.style.left = "0px"; } function down(event) { event = event || window.event; dragging = true; mouseX = parseInt(event.clientX); mouseY = parseInt(event.clientY); objY = parseInt(test.style.top); objX = parseInt(test.style.left); } function move(event){ event = event || window.event; if(dragging == true){ var x,y; y = event.clientY - mouseY + objY; x = event.clientX - mouseX + objX; test.style.top = y + "px"; test.style.left = x + "px"; } } function up(){ dragging = false; } </script>
HTML代码
<div id="test" style="border:1px solid; width:400px; background:#CCCCCC;"> <p>我是拖拽示例DIV。</p> <p>可以试验一下效果。</p> </div>
JS拖拽的实际效果
点击进入示例网页
缺点与待完善之处
这个拖拽的例子还相当不完善,不过已经实现了拖拽最根本的核心。想到的待完善部分有下面几点:获得元素的x与y坐标的方法在本文里简化掉了;本文只让一个固定的元素具有了拖拽功能,灵活性太差;鼠标样式没有变换;快速的“乱甩拖拽”有一定概率出现问题。其中最后一个问题暂时不知道怎么解决,前面三个比较好办。
JavaScript拖拽系列
1. JavaScript拖拽
2. JavaScript拖拽2——多元素、分离JS
3. JavaScript拖拽3——解决快速拖拽的问题
4. JavaScript拖拽4——获得元素的位置
5. JavaScript拖拽5——性能优化
6. JavaScript拖拽6——修复错误
上一篇: spring mail