JS——拖拽封装

来源：互联网发布：记忆力训练软件哪种好编辑：程序博客网时间：2024/06/03 10:27
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#d1{position: fixed;top:100px;left: 100px;width: 200px;height: 200px;background: #ddd;}</style></head><body><div id="d1"></div><script>//http://www.zhangxinxu.com/wordpress/2010/03/javascript%E5%AE%9E%E7%8E%B0%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8B%96%E6%8B%BD%E6%95%88%E6%9E%9C/var params = {left: 0,top: 0,currentX: 0,currentY: 0,flag: false};//获取相关CSS属性var getCss = function(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; };//拖拽的实现var startDrag = function(bar, target, callback){if(getCss(target, "left") !== "auto"){params.left = getCss(target, "left");}if(getCss(target, "top") !== "auto"){params.top = getCss(target, "top");}//o是移动对象bar.onmousedown = function(event){params.flag = true;if(!event){event = window.event;//防止IE文字选中bar.onselectstart = function(){return false;}  }var e = event;params.currentX = e.clientX;params.currentY = e.clientY;};document.onmouseup = function(){params.flag = false;if(getCss(target, "left") !== "auto"){params.left = getCss(target, "left");}if(getCss(target, "top") !== "auto"){params.top = getCss(target, "top");}};document.onmousemove = function(event){var e = event ? event: window.event;if(params.flag){var nowX = e.clientX, nowY = e.clientY;var disX = nowX - params.currentX, disY = nowY - params.currentY;target.style.left = parseInt(params.left) + disX + "px";target.style.top = parseInt(params.top) + disY + "px";if (event.preventDefault) {event.preventDefault();}return false;}if (typeof callback == "function") {callback(parseInt(params.left) + disX, parseInt(params.top) + disY);}}};startDrag(d1,d1);</script></body></html>
阅读全文
0 0