- 浏览: 138617 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
gauzeehom:
...
手动为HibernateDAO里面的DetachedCriteria的Projection擦屁股 -
天机老人:
spring 的mvc用anno我现在也在用,用起来还很爽,但 ...
Web MVC Framework - Stripes观后感 -
zpq2004:
4.相关资源部分链接失效了
Selenium相关资源中文化动员 -
Tin:
BS一下,我们是否需要伪造HTTP报文?或者https报文好伪 ...
银行支付平台开着firebug还是不好用 -
galaxystar:
这个工具是不是类似eclipse debug里的display ...
Java交互管理工具——SecureJSH发布
对google个性主页的拖拽效果的js的完整注释
这两天太忙了,没时间写Blog,业余时间又扒了一次google的拖拽,对比了netvibes的,差不多,让后就写了个注释,顺便学习。
google用了混淆,js里面的命名比较晕。我花了些时间把他们翻译成容易看懂的命名,并且作了注释,希望对大家有帮助。
可以这里下载我的例子:
http://www.blogjava.net/Files/iamtin/google_drag.rar
google用了混淆,js里面的命名比较晕。我花了些时间把他们翻译成容易看懂的命名,并且作了注释,希望对大家有帮助。
可以这里下载我的例子:
http://www.blogjava.net/Files/iamtin/google_drag.rar
//
工具类,使用Util的命名空间,方便管理
var Util = new Object();
// 获取http header里面的UserAgent,浏览器信息
Util.getUserAgent = navigator.userAgent;
// 是否是Gecko核心的Browser,比如Mozila、Firefox
Util.isGecko = Util.getUserAgent.indexOf( " Gecko " ) != - 1 ;
// 是否是Opera
Util.isOpera = Util.getUserAgent.indexOf( " Opera " ) != - 1 ;
// 获取一个element的offset信息,其实就是相对于Body的padding以内的绝对坐标
// 后面一个参数如果是true则获取offsetLeft,false则是offsetTop
// 关于offset、style、client等坐标的定义参考dindin的这个帖子:http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
Util.getOffset = function (el, isLeft) {
var retValue = 0 ;
while (el != null ) {
retValue += el[ " offset " + (isLeft ? " Left " : " Top " )];
el = el.offsetParent;
}
return retValue;
};
// 将一个function(参数中的funcName是这个fuction的名字)绑定到一个element上,并且以这个element的上下文运行,其实是一种继承,这个可以google些文章看看
Util.bindFunction = function (el, fucName) {
return function () {
return el[fucName].apply(el, arguments);
};
};
// 重新计算所有的可以拖拽的element的坐标,对同一个column下面的可拖拽图层重新计算它们的高度而得出新的坐标,防止遮叠
// 计算出来的坐标记录在pagePosLeft和pagePosTop两个属性里面
Util.re_calcOff = function (el) {
for ( var i = 0 ; i < Util.dragArray.length; i ++ ) {
var ele = Util.dragArray[i];
ele.elm.pagePosLeft = Util.getOffset(ele.elm, true );
ele.elm.pagePosTop = Util.getOffset(ele.elm, false );
}
var nextSib = el.elm.nextSibling;
while (nextSib) {
nextSib.pagePosTop -= el.elm.offsetHeight;
nextSib = nextSib.nextSibling;
}
};
// 隐藏Google Ig中间那个table,也就是拖拽的容器,配合show一般就是刷新用,解决一些浏览器的怪癖
Util.hide = function () {
Util.rootElement.style.display = " none " ;
};
// 显示Google Ig中间那个table,解释同上
Util.show = function () {
Util.rootElement.style.display = "" ;
};
// 移动时显示的占位虚线框
ghostElement = null ;
// 获取这个虚线框,通过dom动态生成
getGhostElement = function () {
if ( ! ghostElement) {
ghostElement = document.createElement( " DIV " );
ghostElement.className = " modbox " ;
ghostElement.backgroundColor = "" ;
ghostElement.style.border = " 2px dashed #aaa " ;
ghostElement.innerHTML = " " ;
}
return ghostElement;
};
// 初始化可以拖拽的Element的函数,与拖拽无关的我去掉了
function draggable(el) {
// 公用的开始拖拽的函数
this ._dragStart = start_Drag;
// 公用的正在拖拽的函数
this ._drag = when_Drag;
// 公用的拖拽结束的函数
this ._dragEnd = end_Drag;
// 这个函数主要用来进行拖拽结束后的dom处理
this ._afterDrag = after_Drag;
// 是否正在被拖动,一开始当然没有被拖动
this .isDragging = false ;
// 将这个Element的this指针注册在elm这个变量里面,方便在自己的上下文以外调用自己的函数等,很常用的方法
this .elm = el;
// 触发拖拽的Element,在这里就是这个div上显示标题的那个div
this .header = document.getElementById(el.id + " _h " );
// 对于有iframe的element拖拽不同,这里检测一下并记录
this .hasIFrame = this .elm.getElementsByTagName( " IFRAME " ).length > 0 ;
// 如果找到了header就绑定drag相关的event
if ( this .header) {
// 拖拽时的叉子鼠标指针
this .header.style.cursor = " move " ;
// 将函数绑定到header和element的this上,参照那个函数的说明
Drag.init( this .header, this .elm);
// 下面三个语句将写好的三个函数绑定给这个elemnt的三个函数钩子上,也就实现了element从draggable继承可拖拽的函数
this .elm.onDragStart = Util.bindFunction( this , " _dragStart " );
this .elm.onDrag = Util.bindFunction( this , " _drag " );
this .elm.onDragEnd = Util.bindFunction( this , " _dragEnd " );
}
};
// 下面就是draggable里面用到的那4个function
// 公用的开始拖拽的函数
function start_Drag() {
// 重置坐标,实现拖拽以后自己的位置马上会被填充的效果
Util.re_calcOff( this );
// 记录原先的邻居节点,用来对比是否被移动到新的位置
this .origNextSibling = this .elm.nextSibling;
// 获取移动的时候那个灰色的虚线框
var _ghostElement = getGhostElement();
// 获取正在移动的这个对象的高度
var offH = this .elm.offsetHeight;
if (Util.isGecko) {
// 修正gecko引擎的怪癖吧
offH -= parseInt(_ghostElement.style.borderTopWidth) * 2 ;
}
// 获取正在移动的这个对象的宽度
var offW = this .elm.offsetWidth;
// 获取left和top的坐标
var offLeft = Util.getOffset( this .elm, true );
var offTop = Util.getOffset( this .elm, false );
// 防止闪烁,现隐藏
Util.hide();
// 将自己的宽度记录在style属性里面
this .elm.style.width = offW + " px " ;
// 将那个灰框设定得与正在拖动的对象一样高,比较形象
_ghostElement.style.height = offH + " px " ;
// 把灰框放到这个对象原先的位置上
this .elm.parentNode.insertBefore(_ghostElement, this .elm.nextSibling);
// 由于要拖动必须将被拖动的对象从原先的盒子模型里面抽出来,所以设定position为absolute,这个可以参考一下css布局方面的知识
this .elm.style.position = " absolute " ;
// 设置zIndex,让它处在最前面一层,当然其实zIndex=100是让它很靠前,如果页面里有zIndex>100的,那……
this .elm.style.zIndex = 100 ;
// 由于position=absolute了,所以left和top实现绝对坐标定位,这就是先前计算坐标的作用,不让这个模型乱跑,要从开始拖动的地方开始移动
this .elm.style.left = offLeft + " px " ;
this .elm.style.top = offTop + " px " ;
// 坐标设定完毕,可以显示了,这样就不会闪烁了
Util.show();
// 这里本来有个ig_d.G,没搞明白干什么用的,不过没有也可以用,谁知道麻烦告诉我一声,不好意思
// 还没有开始拖拽,这里做个记号
this .isDragging = false ;
return false ;
};
// 在拖拽时的相应函数,由于绑定到鼠标的move这个event上,所以会传入鼠标的坐标clientX, clientY
function when_Drag(clientX, clientY) {
// 刚开始拖拽的时候将图层变透明,并标记为正在被拖拽
if ( ! this .isDragging) {
this .elm.style.filter = " alpha(opacity=70) " ;
this .elm.style.opacity = 0.7 ;
this .isDragging = true ;
}
// 被拖拽到的新的column(当然也可以是原来那个)
var found = null ;
// 最大的距离,可能是防止溢出或者什么bug
var max_distance = 100000000 ;
// 遍历所有的可拖拽的element,寻找离当前鼠标坐标最近的那个可拖拽元素,以便后面插入
for ( var i = 0 ; i < Util.dragArray.length; i ++ ) {
var ele = Util.dragArray[i];
// 利用勾股定理计算鼠标到遍历到的这个元素的距离
var distance = Math.sqrt(Math.pow(clientX - ele.elm.pagePosLeft, 2 ) + Math.pow(clientY - ele.elm.pagePosTop, 2 ));
// 自己已经浮动了,所以不计算自己的
if (ele == this ) {
continue ;
}
// 如果计算失败继续循环
if (isNaN(distance)) {
continue ;
}
// 如果更小,记录下这个距离,并将它作为found
if (distance < max_distance) {
max_distance = distance;
found = ele;
}
}
// 准备让灰框落脚
var _ghostElement = getGhostElement();
// 如果找到了另外的落脚点
if (found != null && _ghostElement.nextSibling != found.elm) {
// 找到落脚点就先把灰框插进去,这就是我们看到的那个灰框停靠的特效,有点像吸附的感觉,哈哈
found.elm.parentNode.insertBefore(_ghostElement, found.elm);
if (Util.isOpera) {
// Opera的现实问题,要隐藏/显示后才能刷新出变化
document.body.style.display = " none " ;
document.body.style.display = "" ;
}
}
};
// 拖拽完毕
function end_Drag() {
// 拖拽完毕后执行后面的钩子,执行after_Drag(),如果布局发生了变动了就记录到远程服务器,保存你拖拽后新的布局顺序
if ( this ._afterDrag()) {
// remote call to save the change
}
return true ;
};
// 拖拽后的执行钩子
function after_Drag() {
var returnValue = false ;
// 防止闪烁
Util.hide();
// 把拖拽时的position=absolute和相关的那些style都消除
this .elm.style.position = "" ;
this .elm.style.width = "" ;
this .elm.style.zIndex = "" ;
this .elm.style.filter = "" ;
this .elm.style.opacity = "" ;
// 获取灰框
var ele = getGhostElement();
// 如果现在的邻居不是原来的邻居了
if (ele.nextSibling != this .origNextSibling) {
// 把被拖拽的这个节点插到灰框的前面
ele.parentNode.insertBefore( this .elm, ele.nextSibling);
// 标明被拖拽了新的地方
returnValue = true ;
}
// 移除灰框,这是这个灰框的生命周期应该就结束了
ele.parentNode.removeChild(ele);
// 修改完毕,显示
Util.show();
if (Util.isOpera) {
// Opera的现实问题,要隐藏/显示后才能刷新出变化
document.body.style.display = " none " ;
document.body.style.display = "" ;
}
return returnValue;
};
// 可拖拽Element的原形,用来将event绑定到各个钩子,这部分市比较通用的,netvibes也是基本完全相同的实现
// 这部分推荐看dindin的这个,也会帮助理解,http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
var Drag = {
// 对这个element的引用,一次只能拖拽一个Element
obj: null ,
// element是被拖拽的对象的引用,elementHeader就是鼠标可以拖拽的区域
init: function (elementHeader, element) {
// 将start绑定到onmousedown事件,按下鼠标触发start
elementHeader.onmousedown = Drag.start;
// 将element存到header的obj里面,方便header拖拽的时候引用
elementHeader.obj = element;
// 初始化绝对的坐标,因为不是position=absolute所以不会起什么作用,但是防止后面onDrag的时候parse出错了
if (isNaN(parseInt(element.style.left))) {
element.style.left = " 0px " ;
}
if (isNaN(parseInt(element.style.top))) {
element.style.top = " 0px " ;
}
// 挂上空Function,初始化这几个成员,在Drag.init被调用后才帮定到实际的函数,可以参照draggable里面的内容
element.onDragStart = new Function();
element.onDragEnd = new Function();
element.onDrag = new Function();
},
// 开始拖拽的绑定,绑定到鼠标的移动的event上
start: function (event) {
var element = Drag.obj = this .obj;
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 看看是不是左键点击
if (event.which != 1 ) {
// 除了左键都不起作用
return true ;
}
// 参照这个函数的解释,挂上开始拖拽的钩子
element.onDragStart();
// 记录鼠标坐标
element.lastMouseX = event.clientX;
element.lastMouseY = event.clientY;
// 将Global的event绑定到被拖动的element上面来
document.onmouseup = Drag.end;
document.onmousemove = Drag.drag;
return false ;
},
// Element正在被拖动的函数
drag: function (event) {
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 看看是不是左键点击
if (event.which == 0 ) {
// 除了左键都不起作用
return Drag.end();
}
// 正在被拖动的Element
var element = Drag.obj;
// 鼠标坐标
var _clientX = event.clientY;
var _clientY = event.clientX;
// 如果鼠标没动就什么都不作
if (element.lastMouseX == _clientY && element.lastMouseY == _clientX) {
return false ;
}
// 刚才Element的坐标
var _lastX = parseInt(element.style.top);
var _lastY = parseInt(element.style.left);
// 新的坐标
var newX, newY;
// 计算新的坐标:原先的坐标+鼠标移动的值差
newX = _lastY + _clientY - element.lastMouseX;
newY = _lastX + _clientX - element.lastMouseY;
// 修改element的显示坐标
element.style.left = newX + " px " ;
element.style.top = newY + " px " ;
// 记录element现在的坐标供下一次移动使用
element.lastMouseX = _clientY;
element.lastMouseY = _clientX;
// 参照这个函数的解释,挂接上Drag时的钩子
element.onDrag(newX, newY);
return </
var Util = new Object();
// 获取http header里面的UserAgent,浏览器信息
Util.getUserAgent = navigator.userAgent;
// 是否是Gecko核心的Browser,比如Mozila、Firefox
Util.isGecko = Util.getUserAgent.indexOf( " Gecko " ) != - 1 ;
// 是否是Opera
Util.isOpera = Util.getUserAgent.indexOf( " Opera " ) != - 1 ;
// 获取一个element的offset信息,其实就是相对于Body的padding以内的绝对坐标
// 后面一个参数如果是true则获取offsetLeft,false则是offsetTop
// 关于offset、style、client等坐标的定义参考dindin的这个帖子:http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
Util.getOffset = function (el, isLeft) {
var retValue = 0 ;
while (el != null ) {
retValue += el[ " offset " + (isLeft ? " Left " : " Top " )];
el = el.offsetParent;
}
return retValue;
};
// 将一个function(参数中的funcName是这个fuction的名字)绑定到一个element上,并且以这个element的上下文运行,其实是一种继承,这个可以google些文章看看
Util.bindFunction = function (el, fucName) {
return function () {
return el[fucName].apply(el, arguments);
};
};
// 重新计算所有的可以拖拽的element的坐标,对同一个column下面的可拖拽图层重新计算它们的高度而得出新的坐标,防止遮叠
// 计算出来的坐标记录在pagePosLeft和pagePosTop两个属性里面
Util.re_calcOff = function (el) {
for ( var i = 0 ; i < Util.dragArray.length; i ++ ) {
var ele = Util.dragArray[i];
ele.elm.pagePosLeft = Util.getOffset(ele.elm, true );
ele.elm.pagePosTop = Util.getOffset(ele.elm, false );
}
var nextSib = el.elm.nextSibling;
while (nextSib) {
nextSib.pagePosTop -= el.elm.offsetHeight;
nextSib = nextSib.nextSibling;
}
};
// 隐藏Google Ig中间那个table,也就是拖拽的容器,配合show一般就是刷新用,解决一些浏览器的怪癖
Util.hide = function () {
Util.rootElement.style.display = " none " ;
};
// 显示Google Ig中间那个table,解释同上
Util.show = function () {
Util.rootElement.style.display = "" ;
};
// 移动时显示的占位虚线框
ghostElement = null ;
// 获取这个虚线框,通过dom动态生成
getGhostElement = function () {
if ( ! ghostElement) {
ghostElement = document.createElement( " DIV " );
ghostElement.className = " modbox " ;
ghostElement.backgroundColor = "" ;
ghostElement.style.border = " 2px dashed #aaa " ;
ghostElement.innerHTML = " " ;
}
return ghostElement;
};
// 初始化可以拖拽的Element的函数,与拖拽无关的我去掉了
function draggable(el) {
// 公用的开始拖拽的函数
this ._dragStart = start_Drag;
// 公用的正在拖拽的函数
this ._drag = when_Drag;
// 公用的拖拽结束的函数
this ._dragEnd = end_Drag;
// 这个函数主要用来进行拖拽结束后的dom处理
this ._afterDrag = after_Drag;
// 是否正在被拖动,一开始当然没有被拖动
this .isDragging = false ;
// 将这个Element的this指针注册在elm这个变量里面,方便在自己的上下文以外调用自己的函数等,很常用的方法
this .elm = el;
// 触发拖拽的Element,在这里就是这个div上显示标题的那个div
this .header = document.getElementById(el.id + " _h " );
// 对于有iframe的element拖拽不同,这里检测一下并记录
this .hasIFrame = this .elm.getElementsByTagName( " IFRAME " ).length > 0 ;
// 如果找到了header就绑定drag相关的event
if ( this .header) {
// 拖拽时的叉子鼠标指针
this .header.style.cursor = " move " ;
// 将函数绑定到header和element的this上,参照那个函数的说明
Drag.init( this .header, this .elm);
// 下面三个语句将写好的三个函数绑定给这个elemnt的三个函数钩子上,也就实现了element从draggable继承可拖拽的函数
this .elm.onDragStart = Util.bindFunction( this , " _dragStart " );
this .elm.onDrag = Util.bindFunction( this , " _drag " );
this .elm.onDragEnd = Util.bindFunction( this , " _dragEnd " );
}
};
// 下面就是draggable里面用到的那4个function
// 公用的开始拖拽的函数
function start_Drag() {
// 重置坐标,实现拖拽以后自己的位置马上会被填充的效果
Util.re_calcOff( this );
// 记录原先的邻居节点,用来对比是否被移动到新的位置
this .origNextSibling = this .elm.nextSibling;
// 获取移动的时候那个灰色的虚线框
var _ghostElement = getGhostElement();
// 获取正在移动的这个对象的高度
var offH = this .elm.offsetHeight;
if (Util.isGecko) {
// 修正gecko引擎的怪癖吧
offH -= parseInt(_ghostElement.style.borderTopWidth) * 2 ;
}
// 获取正在移动的这个对象的宽度
var offW = this .elm.offsetWidth;
// 获取left和top的坐标
var offLeft = Util.getOffset( this .elm, true );
var offTop = Util.getOffset( this .elm, false );
// 防止闪烁,现隐藏
Util.hide();
// 将自己的宽度记录在style属性里面
this .elm.style.width = offW + " px " ;
// 将那个灰框设定得与正在拖动的对象一样高,比较形象
_ghostElement.style.height = offH + " px " ;
// 把灰框放到这个对象原先的位置上
this .elm.parentNode.insertBefore(_ghostElement, this .elm.nextSibling);
// 由于要拖动必须将被拖动的对象从原先的盒子模型里面抽出来,所以设定position为absolute,这个可以参考一下css布局方面的知识
this .elm.style.position = " absolute " ;
// 设置zIndex,让它处在最前面一层,当然其实zIndex=100是让它很靠前,如果页面里有zIndex>100的,那……
this .elm.style.zIndex = 100 ;
// 由于position=absolute了,所以left和top实现绝对坐标定位,这就是先前计算坐标的作用,不让这个模型乱跑,要从开始拖动的地方开始移动
this .elm.style.left = offLeft + " px " ;
this .elm.style.top = offTop + " px " ;
// 坐标设定完毕,可以显示了,这样就不会闪烁了
Util.show();
// 这里本来有个ig_d.G,没搞明白干什么用的,不过没有也可以用,谁知道麻烦告诉我一声,不好意思
// 还没有开始拖拽,这里做个记号
this .isDragging = false ;
return false ;
};
// 在拖拽时的相应函数,由于绑定到鼠标的move这个event上,所以会传入鼠标的坐标clientX, clientY
function when_Drag(clientX, clientY) {
// 刚开始拖拽的时候将图层变透明,并标记为正在被拖拽
if ( ! this .isDragging) {
this .elm.style.filter = " alpha(opacity=70) " ;
this .elm.style.opacity = 0.7 ;
this .isDragging = true ;
}
// 被拖拽到的新的column(当然也可以是原来那个)
var found = null ;
// 最大的距离,可能是防止溢出或者什么bug
var max_distance = 100000000 ;
// 遍历所有的可拖拽的element,寻找离当前鼠标坐标最近的那个可拖拽元素,以便后面插入
for ( var i = 0 ; i < Util.dragArray.length; i ++ ) {
var ele = Util.dragArray[i];
// 利用勾股定理计算鼠标到遍历到的这个元素的距离
var distance = Math.sqrt(Math.pow(clientX - ele.elm.pagePosLeft, 2 ) + Math.pow(clientY - ele.elm.pagePosTop, 2 ));
// 自己已经浮动了,所以不计算自己的
if (ele == this ) {
continue ;
}
// 如果计算失败继续循环
if (isNaN(distance)) {
continue ;
}
// 如果更小,记录下这个距离,并将它作为found
if (distance < max_distance) {
max_distance = distance;
found = ele;
}
}
// 准备让灰框落脚
var _ghostElement = getGhostElement();
// 如果找到了另外的落脚点
if (found != null && _ghostElement.nextSibling != found.elm) {
// 找到落脚点就先把灰框插进去,这就是我们看到的那个灰框停靠的特效,有点像吸附的感觉,哈哈
found.elm.parentNode.insertBefore(_ghostElement, found.elm);
if (Util.isOpera) {
// Opera的现实问题,要隐藏/显示后才能刷新出变化
document.body.style.display = " none " ;
document.body.style.display = "" ;
}
}
};
// 拖拽完毕
function end_Drag() {
// 拖拽完毕后执行后面的钩子,执行after_Drag(),如果布局发生了变动了就记录到远程服务器,保存你拖拽后新的布局顺序
if ( this ._afterDrag()) {
// remote call to save the change
}
return true ;
};
// 拖拽后的执行钩子
function after_Drag() {
var returnValue = false ;
// 防止闪烁
Util.hide();
// 把拖拽时的position=absolute和相关的那些style都消除
this .elm.style.position = "" ;
this .elm.style.width = "" ;
this .elm.style.zIndex = "" ;
this .elm.style.filter = "" ;
this .elm.style.opacity = "" ;
// 获取灰框
var ele = getGhostElement();
// 如果现在的邻居不是原来的邻居了
if (ele.nextSibling != this .origNextSibling) {
// 把被拖拽的这个节点插到灰框的前面
ele.parentNode.insertBefore( this .elm, ele.nextSibling);
// 标明被拖拽了新的地方
returnValue = true ;
}
// 移除灰框,这是这个灰框的生命周期应该就结束了
ele.parentNode.removeChild(ele);
// 修改完毕,显示
Util.show();
if (Util.isOpera) {
// Opera的现实问题,要隐藏/显示后才能刷新出变化
document.body.style.display = " none " ;
document.body.style.display = "" ;
}
return returnValue;
};
// 可拖拽Element的原形,用来将event绑定到各个钩子,这部分市比较通用的,netvibes也是基本完全相同的实现
// 这部分推荐看dindin的这个,也会帮助理解,http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
var Drag = {
// 对这个element的引用,一次只能拖拽一个Element
obj: null ,
// element是被拖拽的对象的引用,elementHeader就是鼠标可以拖拽的区域
init: function (elementHeader, element) {
// 将start绑定到onmousedown事件,按下鼠标触发start
elementHeader.onmousedown = Drag.start;
// 将element存到header的obj里面,方便header拖拽的时候引用
elementHeader.obj = element;
// 初始化绝对的坐标,因为不是position=absolute所以不会起什么作用,但是防止后面onDrag的时候parse出错了
if (isNaN(parseInt(element.style.left))) {
element.style.left = " 0px " ;
}
if (isNaN(parseInt(element.style.top))) {
element.style.top = " 0px " ;
}
// 挂上空Function,初始化这几个成员,在Drag.init被调用后才帮定到实际的函数,可以参照draggable里面的内容
element.onDragStart = new Function();
element.onDragEnd = new Function();
element.onDrag = new Function();
},
// 开始拖拽的绑定,绑定到鼠标的移动的event上
start: function (event) {
var element = Drag.obj = this .obj;
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 看看是不是左键点击
if (event.which != 1 ) {
// 除了左键都不起作用
return true ;
}
// 参照这个函数的解释,挂上开始拖拽的钩子
element.onDragStart();
// 记录鼠标坐标
element.lastMouseX = event.clientX;
element.lastMouseY = event.clientY;
// 将Global的event绑定到被拖动的element上面来
document.onmouseup = Drag.end;
document.onmousemove = Drag.drag;
return false ;
},
// Element正在被拖动的函数
drag: function (event) {
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 看看是不是左键点击
if (event.which == 0 ) {
// 除了左键都不起作用
return Drag.end();
}
// 正在被拖动的Element
var element = Drag.obj;
// 鼠标坐标
var _clientX = event.clientY;
var _clientY = event.clientX;
// 如果鼠标没动就什么都不作
if (element.lastMouseX == _clientY && element.lastMouseY == _clientX) {
return false ;
}
// 刚才Element的坐标
var _lastX = parseInt(element.style.top);
var _lastY = parseInt(element.style.left);
// 新的坐标
var newX, newY;
// 计算新的坐标:原先的坐标+鼠标移动的值差
newX = _lastY + _clientY - element.lastMouseX;
newY = _lastX + _clientX - element.lastMouseY;
// 修改element的显示坐标
element.style.left = newX + " px " ;
element.style.top = newY + " px " ;
// 记录element现在的坐标供下一次移动使用
element.lastMouseX = _clientY;
element.lastMouseY = _clientX;
// 参照这个函数的解释,挂接上Drag时的钩子
element.onDrag(newX, newY);
return </
相关推荐
其次,"对google个性主页的拖拽效果的js的完整注释.txt"可能是对实现拖拽效果的JavaScript代码进行详细解释的文档。这些注释对于理解代码的逻辑和工作原理至关重要,尤其是对于初学者,通过阅读注释能更好地学习和...
本资源“仿Google自定义拖拽层”旨在模仿Google产品的拖拽层功能,为开发者提供了一个清晰注释、易于改造的基础代码模板。 拖拽层的核心是JavaScript事件处理和DOM操作。在JavaScript中,我们需要监听鼠标的`...
在IT行业中,Google Maps是一个广泛使用的在线地图服务平台,由谷歌公司提供。它集成了地理位置信息、路线规划、交通状况查询、卫星图像等多种功能,被开发者广泛应用于网站和移动应用中。本压缩包文件包含了Google ...
第1章 页面特效 ...1.2 页面自动最大化 1.3 页面自动刷新 ...22.10 用JavaScript调用Google AdSense 22.11 Ajax效果:可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性...
22.10 用JavaScript调用Google AdSense 22.11 Ajax效果:可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性的对象 22.15 用prototype实现JavaScript的继承 22.16 ...
- **Angular**:Google维护的全面的前端框架,包含完整的解决方案。 综上所述,JavaScript完全手册涵盖了从基础到进阶的广泛内容,对于网页特效的制作提供了强大的支持。通过深入学习并实践,开发者可以充分利用...
它包含了完整的源代码和注释,方便开发者理解内部工作原理和进行定制。 7. `dart_compressed.js`、`javascript_compressed.js`、`php_compressed.js`、`python_compressed.js`:这些文件提供了将Blockly积木转换为...
【标题】"仿google日历"是一个项目,旨在模仿谷歌日历的功能,为用户提供一个方便的日程管理工具。这个项目可能包含了一个HTML页面,即"rili.html",该页面可能是用户界面的核心部分,用于展示日历视图、添加、编辑...
本文主要讲述如何利用jQuery实现一个简单的图片切换效果,该方法支持跨浏览器的兼容,包括早期的IE6浏览器、火狐(Firefox)、谷歌(Chrome)、欧朋(Opera)等现代浏览器。文章通过实例代码演示了如何使用jQuery...
在使用过程中,开发者可以利用这些插件来捕获JavaScript的运行结果,例如网页动态效果、Ajax请求后的界面变化等。同时,它们也可以用于创建教程或文档,通过截图配合文字说明,清晰展示前端代码实现的功能。 总结...
4. **注释和反馈**:插件可能提供了注释和反馈功能,让团队成员可以直接在原型上添加评论,进行协作讨论,提升团队合作效率。 5. **版本兼容性**:考虑到版本号为0.6.3,这个插件可能已经经过了多次更新和优化,以...
6. **数据同步**:为了保证用户在多设备间无缝切换,日历插件通常会支持与云服务同步,如Google日历、Outlook或Apple日历。这样,无论用户在哪里,他们的时间安排总是最新的。 7. **API集成**:对于开发人员来说,...
Scratch是麻省理工学院(MIT)媒体实验室终身幼儿园团队开发的一款面向儿童的图形化编程工具,它通过拖拽积木式的编程语块,让孩子们能够轻松地学习编程概念。Scratch3.0是对该平台的最新升级,引入了更多功能、优化...
4. 拖放安装:找到已下载的`.crx`文件,将其从文件管理器拖放到Chrome扩展页面中。 5. 确认安装:浏览器会弹出一个确认窗口,点击“添加扩展程序”完成安装。 需要注意的是,直接从非官方渠道安装扩展可能存在安全...
"transpire-crx插件"是一款专为英语用户设计的浏览器扩展程序,它提供了一种高效且便捷的方式,让用户能够对网页内容进行注释和视觉反馈。这款插件的出现,使得在线浏览时的沟通和信息记录变得更加直观,尤其适合...
1.Chat文件夹下为源文件 2.Chat.war为部署文件 <br>第19章 程序描述:本章将使用拖拽方式实现定制个性化主页程序。通过拖拽的方式进行布局设计,在很大程度上提高了用户的可视化操作,真正实现了所见...
7. **油猴脚本**:Tampermonkey脚本通常以`.user.js`文件形式存在,由`// @`开头的元数据注释和实际的JavaScript代码组成。这些元数据注释包含了脚本的信息,如名称、描述、更新URL等。 综上所述,Tampermonkey是一...