原文来自:
http://www.cainiao8.com/web/js_examples/27_tuozhuai6.html
在实际应用拖拽的时候发现自己犯了两个错误,都是当文档内容多余一个屏幕的时候才会出现。
错误一,绝对位置
刚开始非常不解为什么拖拽需要获得鼠标相对文档的绝对位置,我之前写的代码也都是仅仅使用clientX和clientY实现的,这两个属性是相对浏览器的,没有将文档的滚动计算在内。因此在内容超过一页的时候,如果用户使用鼠标拖拽元素,不会有问题。但是如果用户采用边拖拽边滚滚动条的方式就会造成文档滚动部分没有被计算在内。测试了一下,豆瓣、百度空间、MSN Space的拖拽都不会有这个问题。
总之,应该使用元素相对文档的绝对位置。
错误二,没有更新鼠标位置和元素位置
下面是我刚开始想出来的拖拽实现方法,不过有一个严重的问题,就是在鼠标移动的时候不会动态地更新鼠标当前位置以及元素当前位置。但是如果我们使用相对位置的时候这个问题不会得到暴露。
拖拽状态 = 0
鼠标在元素上按下的时候{
拖拽状态 = 1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
}
鼠标在元素上移动的时候{
如果拖拽状态是0就什么也不做。
如果拖拽状态是1,那么
元素y = 现在鼠标y - 原来鼠标y + 原来元素y
元素x = 现在鼠标x - 原来鼠标x + 原来元素x
}
鼠标在任何时候放开的时候{
拖拽状态 = 0
}
应该修改为:
拖拽状态 = 0
鼠标在元素上按下的时候{
拖拽状态 = 1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
}
鼠标在元素上移动的时候{
如果拖拽状态是0就什么也不做。
如果拖拽状态是1,那么
元素y = 现在鼠标y - 原来鼠标y + 原来元素y
元素x = 现在鼠标x - 原来鼠标x + 原来元素x
更新元素坐标的记录!
更新鼠标坐标的记录!
}
鼠标在任何时候放开的时候{
拖拽状态 = 0
}
找到问题所在之后,代码的修改就比较简单了。最后的代码如下:
<script type="text/javascript">
//记录当前的拖拽元素
var dragElement = null;
//4个全局变量,用来记录当前拖拽元素以及鼠标的坐标
//由于不可能同时拖拽多个元素,所以不会冲突
var mouseY,mouseX,objY,objX;
//用于动态更新z-index,确保不会造成不该移动的元素瞎动。
var max = 1;
//初始化网页,遍历所有的元素,如果元素的class属性为"drag"
//则对其进行适当地设置
function dragInit(node){
if(node.className == "drag"){
node.onmousedown = down;
document.onmousemove = move;
node.onmouseover = over;
node.style.position = "relative";
node.dragging = false;
}
var children = node.childNodes;
for(var i = 0;i < children.length; i++){
dragInit(children[i]);
}
}
window.onload = function(){
//从document开始遍历
dragInit(document);
//确保在文档的任何位置将鼠标松开都将导致拖拽停止
document.onmouseup = docUp;
window.onblur = docUp;
}
//鼠标按下响应事件
function down(event)
{
event = event || window.event;
//按谁拽谁
dragElement = this;
//记录鼠标的当前坐标
mouseX = parseInt(event.clientX)
+(document.documentElement.scrollLeft || document.body.scrollLeft);
mouseY = parseInt(event.clientY)
+(document.documentElement.scrollTop || document.body.scrollTop);
//记录元素的当前坐标
objY = parseInt(getNodeStyle(dragElement,"top"));
objX = parseInt(getNodeStyle(dragElement,"left"));
//IE不返回未设置的CSS属性
if(!objY)objY=0;
if(!objX)objX=0;
this.style.zIndex = max++;
}
function move(event){
event = event || window.event;
if(dragElement){
var x,y;
//y等于鼠标当前y - 记录的鼠标y + 元素y ,后面的x一样
y = parseInt(event.clientY)
+(document.documentElement.scrollTop || document.body.scrollTop)
- mouseY + objY;
x = parseInt(event.clientX)
+(document.documentElement.scrollLeft || document.body.scrollLeft)
- mouseX + objX;
//更新元素的实际显示
dragElement.style.top = y + "px";
dragElement.style.left = x + "px";
//更新鼠标坐标和元素坐标的记录
objY=y;
objX=x;
mouseX = parseInt(event.clientX)
+(document.documentElement.scrollLeft || document.body.scrollLeft);
mouseY = parseInt(event.clientY)+(
document.documentElement.scrollTop || document.body.scrollTop);
}
}
function docUp(){
//停止拖拽
dragElement = null;
}
function over(){
this.style.cursor = "move";
}
//获得元素的坐标
function getNodeStyle(node,styleName){
var realStyle = null;
if(node.currentStyle){
realStyle = node.currentStyle[styleName];
}else if(window.getComputedStyle){
realStyle = window.getComputedStyle(node,null)[styleName];
}
return realStyle;
}
</script>
点击进入
测试页面。
JavaScript拖拽系列
1. JavaScript拖拽
2. JavaScript拖拽2——多元素、分离JS
3. JavaScript拖拽3——解决快速拖拽的问题
4. JavaScript拖拽4——获得元素的位置
5. JavaScript拖拽5——性能优化
6. JavaScript拖拽6——修复错误
分享到:
相关推荐
第四章讲解了循环结构(如for循环、while循环)的使用方法,以及如何使用调试工具来找出并修复程序中的错误。这部分内容对于提高编程效率非常有帮助。 **5. 函数、数组和对象** 第五章进一步介绍了JavaScript的...
2. **控件与事件处理**:ASP.NET Web Forms提供了一系列内置控件,如TextBox、GridView、Button等,这些控件可以直接在页面上拖放,并且可以绑定到数据源。事件处理机制使得当用户与控件交互时,可以触发后台代码的...
- **调试**:调试是定位和修复代码中错误的过程。这部分介绍了一些常用的调试工具和技术,如错误控制、DOM查看器、Firebug等。 - **错误控制**:通过捕获异常来处理运行时可能发生的错误。 - **DOM查看器**:用于...
7. **用户界面设计**:ASP.NET中的Web Forms允许开发者使用拖放控件的方式创建用户界面,而CSS和JavaScript可以用来实现更丰富的交互效果和美化界面。 8. **调试与部署**:ASP.NET提供了强大的调试工具,帮助开发者...
"牛气霸屏3.7.4最新修复源码"这个标题指出的是一个特定版本的软件——牛气霸屏的3.7.4版,它经过了最新的修复更新,提供了源代码。这表明我们正在讨论的是一款开源软件或者是一个允许用户查看、修改和分发源代码的...
ASP.NET允许开发者自定义错误页,提供友好错误信息,同时记录日志以便分析和修复问题。 通过研究这个在线订餐系统的源码,你可以了解到ASP.NET在实际项目中的完整流程,从用户界面设计到后端业务逻辑,再到数据库...
- **调试工具**:集成的调试器可以帮助开发者查找和修复程序中的错误,提供断点设置、单步执行、变量查看等功能。 2. **Web应用开发** - **Java Web项目**:NetBeans支持创建基于Servlet、JSP和JSF的Web项目,...
同时,Visual Studio提供的调试工具可以帮助开发者查找和修复代码中的错误。 9. **用户体验优化** 为了提升用户体验,ASP.NET支持AJAX(Asynchronous JavaScript and XML),使得部分页面可以异步更新,无需完全...
开发过程中,使用Visual Studio的调试工具可以帮助查找和修复代码错误。同时,良好的日志记录系统,如NLog或log4net,可以追踪程序运行时的问题,以便后期分析和优化。 总结来说,这个"视频小偷程序"是一个综合...
为了确保系统的稳定性和可靠性,源码中可能包含了错误处理代码和日志记录机制,以便在出现问题时能够及时定位和修复。 8. 数据绑定和模板: ASP.NET提供了数据绑定机制,可以将数据源与UI控件连接起来,实现动态...
标题“jquery-ui-1.12.1”表明我们关注的是这个项目的特定版本——1.12.1,这是jQuery UI发展历史中的一个重要里程碑,包含了丰富的功能和修复了许多已知问题。 在描述中,同样只提到了“jquery-ui-1.12.1”,这...
今天我们要探讨的是一个基于JavaScript(JS)的半成品工作流设计器——FlowdesignV3_1_20160525。尽管它是一个未完成品,但其潜力和可扩展性仍值得我们深入研究。 首先,让我们了解什么是工作流设计器。工作流设计...
1. **Web Forms**:ASP.NET Web Forms是ASP.NET框架的一部分,它允许开发者通过拖放控件和事件驱动编程来创建动态网页。在这个Blog系统中,Web Forms可能被用来创建各种表单,如登录、注册、文章编辑等,提供直观的...
**ASP.NET控件库——Obout ASPTreeView详解** Obout ASPTreeView是一款功能强大的ASP.NET控件,由外国开发者设计,提供了一系列高级功能和定制选项,以提升Web应用程序的用户界面体验。该控件集是开源的,允许...
然后,我们进入JavaScript的核心部分——jQuery库。jQuery是一个流行的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。在这个项目中,jQuery被用来监听用户事件(如点击按钮),然后执行相应的表单切换...
8. **错误处理和调试**:编写健壮的代码,包括异常处理和日志记录,以便在出现问题时能够快速定位和修复。 9. **部署与运维**:了解IIS(Internet Information Services)或其他Web服务器的配置和部署,以及如何...
【标题】"CoderDojoSideScroller:在 Scratch 和 JavaScript 中创建一个侧边卷轴"是一个编程项目,旨在教导初学者如何使用两种不同的编程语言——Scratch和JavaScript,来构建一个经典的2D游戏机制:侧边卷轴。...
3. **错误修复**:官方对已知的bug进行了修复,确保了组件的稳定性和兼容性,尤其是对于不同浏览器的适配问题。 4. **API调整**:可能对某些方法和事件接口进行了调整,使得API更加清晰和统一,方便开发者理解和...
总结,jQuery UI 1.8.6是一个功能全面、易于使用的JavaScript UI库,它为开发者提供了一系列直观的组件和丰富的交互功能,大大简化了网页开发过程。了解并熟练掌握jQuery UI的使用,能够帮助你创建出具有专业级用户...