// 可拖拽Element的原形，用来将event绑定到各个钩子，这部分市比较通用的，netvibes也是基本完全相同的实现 // 这部分推荐看dindin的这个，也会帮助理解，http://www.jroller.com/page/dindin/?anchor=pro_java_12 var Drag = { // 对这个element的引用，一次只能拖拽一个Element obj: null , // element是被拖拽的对象的引用，elementHeader就是鼠标可以拖拽的区域 init: (elementHeader, element) { // 将start绑定到down事件，按下鼠标触发start elementHeader.down = 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 " ; } // 挂上空，初始化这几个成员，在Drag.init被调用后才帮定到实际的函数，可以参照draggable里面的内容 element.onDragStart = new (); element.onDragEnd = new (); element.onDrag = new (); }, // 开始拖拽的绑定，绑定到鼠标的移动的event上 start: (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上面来 up = Drag.end; move = Drag.drag; return false ; }, // Element正在被拖动的函数 drag: (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 false ; }, // Element正在被释放的函数，停止拖拽 end: (event) { // 解决不同浏览器的event模型不同的问题 event = Drag.fixE(event); // 解除对Global的event的绑定 move = null ; up = null ; // 先记录下onDragEnd的钩子，好移除obj var _onDragEndFuc = Drag.obj.onDragEnd(); // 拖拽完毕，obj清空 Drag.obj = null ; return _onDragEndFuc; }, // 解决不同浏览器的event模型不同的问题 fixE: (ig_) { if ( typeof ig_ == " undefined " ) { ig_ = event; } if ( typeof ig_.layerX == " undefined " ) { ig_.layerX = ig_.offsetX; } if ( typeof ig_.layerY == " undefined " ) { ig_.layerY = ig_.offsetY; } if ( typeof ig_.which == " undefined " ) { ig_.which = ig_.button; } return ig_; }};
// 下面是初始化的函数了，看看上面这些东西怎么被调用 var _IG_initDrag = (el) { // column那个容器，在google里面就是那个table布局的tbody，netvibes用的<div> Util.rootElement = el; // 这个tbody的行 Util._rows = Util.rootElement.tBodies[ 0 ].rows[ 0 ]; // 列，google是3列，其实也可以更多 Util.column = Util._rows.cells; // 用来存取可拖拽的对象 Util.dragArray = new Array(); var counter = 0 ; for ( var i = 0 ; i < Util.column.length; i ++ ) { // 搜索所有的column var ele = Util.column[i]; for ( var j = 0 ; j < ele.childNodes.length; j ++ ) { // 搜索每一column里面的所有element var ele1 = ele.childNodes[j]; // 如果是div就把它初始化为一个draggable对象 if (ele1.tagName == " DIV " ) { Util.dragArray[counter] = new draggable(ele1); counter ++ ; } } }};
// google的页面里可以拖动的部分的id是"t_1" // 挂载到，载入完毕执行。不过实际上google没有用。 // 而是写在页面最下面，异曲同工吧，也许直接写在页面是种怪癖，或者也有可能是兼容性考虑。
// 请将下面两条被注释掉的代码加，到你自己下载的一个google ig页面里面，把里面的所有其余删除，挂上这个js也可以拖拽了，哈哈 // _table=getElementById("t_1"); // = _IG_initDrag(_table);
// 其实看懂这些代码对学习java很有益，希望对大家能有帮助
