错误总结:

1. var disX = 0;   现在window.onload里声明变量,而不是在事件oDiv.onmousedown里面声明并赋值。

对于这个还不是很明白。

2. onmousedown事件的主体是oDiv,不是整个窗口。

3. if ... else if ...   两个花括号的中间不可以写分号 ; 。

4. oDiv.style.left = l + 'px';    left 值有px。

5. 写法错误。  可视窗的宽度:  document.documentElement.clientWidth

if(l<)
{
l = 0;
}
// if(l>oEvent.clientWidth - oDiv.offsetWidth)
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
// l = oEvent.clientWidth - oDiv.offsetWidth l=document.documentElement.clientWidth-oDiv.offsetWidth;
};
<script>

    window.onload = function()
{
var oDiv = document.getElementById('div1'); var disX = 0; // 为什么在这里声明, 且声明变量为 0 ?
var disY = 0; oDiv.onmousedown = function(ev)
// 不是点击整个窗口时拖拽, 是点击div的时候拖拽
{
var oEvent = ev || event; disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop; //window.onmousemove = function(ev) // window.onmouseove 和 document.onmousemove 区别?
document.onmousemove=function (ev)
{
var oEvent = ev || event;
var l = oEvent.clientX - disX // 变量表示div位置的值
var t = oEvent.clientY - disY // 画图,分成 左边顶格, 右边顶格 两种情况考虑。
if(l<0)
{
l=0;
} //; // if 和 else if之间的语句不可以写分号 ; else if(l>document.documentElement.clientWidth - oDiv.offsetWidth)
{
l = document.documentElement.clientWidth - oDiv.offsetWidth;
}; if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
} oDiv.style.left = l + 'px'; // left 值有px
oDiv.style.top = t + 'px';
}; document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
}; return false; // 阻止默认事件,解决火狐浏览器拖拽空div的bug
};
};
</script>
    <script>
window.onload = function()
{
var oDiv = document.getElementById('div1');
var disX = 0;
var disY = 0; oDiv.onmousedown = function(ev)
{
var oEvent = ev||event; disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function(ev)
{
var oEvent = ev||event;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY; if(l<0)
{
l = 0;
}
// if(l>oEvent.clientWidth - oDiv.offsetWidth)
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
// l = oEvent.clientWidth - oDiv.offsetWidth l=document.documentElement.clientWidth-oDiv.offsetWidth;
}; if(t<0)
{
t = 0;
}
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
} // if(t>oEvent.clientHeight - oDiv.offsetHeight)
// {
// l = oEvent.clientHeight - oDiv.offsetHeight
// }; oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
}; document.onmouseup = function()
{
document.onmousemove = null;
document.onmouseup = null;
}; return false;
};
};
</script>

JS错误记录 - 事件 - 拖拽的更多相关文章

  1. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  3. 纯JS Web在线可拖拽的流程设计器

    F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

  4. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  5. jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题

    今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...

  6. JS利用 Sea.js 实现模块化:拖拽、缩放及范围限制

    知识点总结: Sea.js的使用:define.export.seajs.use.require等方法:   参考:http://seajs.org/docs/ Sea.js与require.js的区 ...

  7. 原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,有实例Demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...

  8. 原生js实现模块来回拖拽效果

    代码比较冗余,还没来得及做整理,往见谅. 主要用到的 JS 事件有: onmousedown:鼠标点下事件 onmousemove:鼠标移动事件 onmouseup:鼠标放开事件 具体代码如下: &l ...

  9. JS 弹出框拖拽

    css代码 body { margin:; text-align: center; } .box { display: none; background-color: #fff !important; ...

随机推荐

  1. 可靠的UDP连接 & MTU MSS

    这个网页里面写了: http://blog.csdn.net/plusboy/article/details/1523308 其可靠性必须由上层应用实现.一般都会采用消息重传来实现其可靠性,采用消息重 ...

  2. [转]Massive Model Rendering Techniques

    Massive Model Rendering Techniques Andreas Dietrich Enrico Gobbetti Sung-Eui Yoon Abstract We presen ...

  3. Android学习笔记进阶19 之给图片加边框

    //设置颜色 public void setColour(int color){ co = color; } //设置边框宽度 public void setBorderWidth(int width ...

  4. linux系统下的/proc目录介绍

    1. /proc目录 Linux 内核提供了一种通过 /proc 文件系统,在运行时访问内核内部数据结构.改变内核设置的机制.proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以 ...

  5. Intellij IDEA中修改项目名称

    如下图红色标识所示: 修改方法见下图:

  6. Android之——短信的备份与还原

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47091281 眼下,Android手机中的一些软件能够实现手机短信的备份与还原操作 ...

  7. Log4j日志管理的简单实例

    大型项目中非常多情况下要分析程序的日志信息,怎样管理自己的日志信息至关重要. 在应用程序中加入日志记录总的来说基于三个目的 , 监视代码中变量的变化情况,周期性的记录到文件里供其它应用进行统计分析工作 ...

  8. 微软自拍应用iOS版公布

    微软自拍(Microsoft Selfie)主要是支持自拍后还能加强自拍效果的功能. 只是和其它自拍应用不同的是.Microsoft Selfie 利用了机器学习来增强照片,应用会"考虑年龄 ...

  9. 【单词】常见单词含义的辨异(emulator/simulator、hardware/firmware)

    1. emulator 与 simulator The Simulator tries to duplicate the behavior of the device.(仿真的是行为): The Em ...

  10. Error: org.apache.mahout.math.CardinalityException: Required cardinality 10 but got 30问题解决办法

    问题详情 在运行mahout中kmeans算法时,采取的是其默认输入路径/user/hadoop/testdata 和 默认输出路径/user/hadoop/output. [hadoop@djt00 ...