// 初始化可以拖拽的Element的函数,与拖拽无关的我去掉了
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 = getElementById(el.id + " _h " );
// 对于有i的element拖拽不同,这里检测一下并记录
this .hasI = this .elm.getElementsByTagName( " I " ).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.bind( this , " _dragStart " );
this .elm.onDrag = Util.bind( this , " _drag " );
this .elm.onDragEnd = Util.bind( this , " _dragEnd " );
}
};
// 下面就是draggable里面用到的那4个
// 公用的开始拖拽的函数
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 ;
};