提示：您可以先修改部分代碼再運行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>拖動效果相容Firefox</title><style type="text/css"><!--body{margin:0px;padding:0px;font-size:12px;background:#eee;line-height:20px;}.bodyer{width:760px;margin:20px auto auto;border:1px dotted #ccc;background:#fff;}.t_rt{text-align:right;}h1,h2,h3,h4,h5,h6{font-weight:bold;margin:0px;padding:0px;font-size:12px;}ul,li{margin:0px;padding:0px;}li{list-style-type:none;}h1{margin:10px;padding-right:10px;padding-bottom:5px;border-bottom:1px dotted #ccc;}.preview{margin:10px;padding:10px;overflow:hidden;background:#eee;}.cont{padding:10px;}.cls{clear:both;}.hidden{display:none;}#sourse{border:1px dotted #ccc;width:600px;height:300px;margin:0px auto;}.textDiv{margin:10px 40px 10px;text-align:center;}h2{margin:0px 10px;background:#ccc;padding:5px;}.example{margin:10px;background:#FFF;border:1px dotted #ccc;padding:10px;}.authorInfo{width:760px; margin:10px auto 10px;text-align:center;}.c_666{color:#666;}.red{color:red;}.scrolldoorFrame{width:600px;border:1px solid #FFF;margin:0px auto;overflow:hidden;position:relative;height:400px;}.scrollUl{width:400px;border-bottom:1px solid #CCC;overflow:hidden;height:35px;}.scrollUl li{float:left;}.bor03{border:1px solid #ccc;border-top-width:0px;}.sd01{cursor:pointer;border:1px solid #CCC;background:#FFF;margin:5px;padding:2px;font-weight:bold;}.sd02{cursor:pointer;border:0px solid #CCC;margin:5px;padding:2px;}--></style><script type="text/javascript">/*十三妖qq:181907667msn:wl181907667@hotmail.com郵箱:thirdteendevil@163.com*/function dragClass(){this.mouseState = document.all ? 1 : 0 ;this.x;this.y;this.dragId = null;this.index = 100;document.onselectstart = function(){return false;};}dragClass.prototype = {dragStar:function(dragId,moveId){//拖動入口函數var _this = this;_this.$(dragId).style.cursor = "move";_this.$(dragId).onmousedown = function(e){var e = e ? e : event;//_this.$(moveId).style.zIndex = _this.index++;if(e.button == _this.mouseState){_this.setDragInfo(e,moveId,moveId);_this.dragPro(moveId);}},_this.$(moveId).onmousedown = function(e){_this.$(moveId).style.zIndex = _this.index++;},_this.$(dragId).onmouseup = function(){_this.clearDragId();}document.onmouseup = function(){_this.clearDragId();}},setDragInfo:function(e,dragId,moveId){//拖動初始化this.x = e.clientX;this.y = e.clientY;this.dragId = dragId;if(this.$(moveId).style.position != "absolute"){this.$(moveId).style.width = this.$(moveId).offsetWidth + "px";this.$(moveId).style.height = this.$(moveId).offsetHeight + "px";this.$(moveId).style.position = "absolute";this.$(moveId).style.left = this.$(moveId).offsetLeft + "px";this.$(moveId).style.top = this.$(moveId).offsetTop + "px";}},clearDragId:function(){ //清除拖動IDthis.dragId = null;},dragPro:function(moveId){var _this = this;document.onmousemove = function(e){var e = e ? e : event;if(e.button == _this.mouseState && _this.dragId != null){var x = e.clientX;var y = e.clientY;//_this.$(moveId).style.left = (_this.$(moveId).offsetLeft + (x - _this.x)) + "px";//_this.$(moveId).style.top = (_this.$(moveId).offsetTop + (y - _this.y)) + "px";_this.$(moveId).style.left = (parseInt(_this.$(moveId).style.left) + (x - _this.x)) + "px";_this.$(moveId).style.top = (parseInt(_this.$(moveId).style.top) + (y - _this.y)) + "px";_this.x = x;_this.y = y;//alert(_this.$(dragId).style.left);}}},$:function(o){//擷取對象if(typeof(o) == "string"){if(document.getElementById(o)){return document.getElementById(o);}else{alert("errId ""+ o + ""!");return false;}}else{return o;}}}window.onload = function(){var c = new dragClass();c.dragStar("b","a");c.dragStar("d","c");}</script></head><body><div class="bodyer"><h1 class="t_rt">滑鼠拖動層封裝類</h1><h2>效果預覽</h2><div class="preview"><div class="scrolldoorFrame"><div id="a" ><div id="b" >拖動層1</div> 移動層</div><div id="c" ><div id="d" >拖動層2</div> 移動層</div></div></div><h2>原始碼</h2><div class="textDiv"><textarea id="sourse">function dragClass(){this.mouseState = document.all ? 1 : 0 ;this.x;this.y;this.dragId = null;this.index = 100;document.onselectstart = function(){return false;};}dragClass.prototype = {dragStar:function(dragId,moveId){//拖動入口函數var _this = this;_this.$(dragId).style.cursor = "move";_this.$(dragId).onmousedown = function(e){var e = e ? e : event;//_this.$(moveId).style.zIndex = _this.index++;if(e.button == _this.mouseState){_this.setDragInfo(e,moveId,moveId);_this.dragPro(moveId);}},_this.$(moveId).onmousedown = function(e){_this.$(moveId).style.zIndex = _this.index++;},_this.$(dragId).onmouseup = function(){_this.clearDragId();}document.onmouseup = function(){_this.clearDragId();}},setDragInfo:function(e,dragId,moveId){//拖動初始化this.x = e.clientX;this.y = e.clientY;this.dragId = dragId;if(this.$(moveId).style.position != "absolute"){this.$(moveId).style.width = this.$(moveId).offsetWidth + "px";this.$(moveId).style.height = this.$(moveId).offsetHeight + "px";this.$(moveId).style.position = "absolute";this.$(moveId).style.left = this.$(moveId).offsetLeft + "px";this.$(moveId).style.top = this.$(moveId).offsetTop + "px";}},clearDragId:function(){ //清除拖動IDthis.dragId = null;},dragPro:function(moveId){var _this = this;document.onmousemove = function(e){var e = e ? e : event;if(e.button == _this.mouseState && _this.dragId != null){var x = e.clientX;var y = e.clientY;//_this.$(moveId).style.left = (_this.$(moveId).offsetLeft + (x - _this.x)) + "px";//_this.$(moveId).style.top = (_this.$(moveId).offsetTop + (y - _this.y)) + "px";_this.$(moveId).style.left = (parseInt(_this.$(moveId).style.left) + (x - _this.x)) + "px";_this.$(moveId).style.top = (parseInt(_this.$(moveId).style.top) + (y - _this.y)) + "px";_this.x = x;_this.y = y;//alert(_this.$(dragId).style.left);}}},$:function(o){//擷取對象if(typeof(o) == "string"){if(document.getElementById(o)){return document.getElementById(o);}else{alert("errId ""+ o + ""!");return false;}}else{return o;}}}
使用方法
1.把以上代碼引進你的頁面 <script type="text/javascript" src="dragClass.js"></script>
2.在頁面的"</body>"標籤前加入以下代碼:
<script type="text/javascript">
window.onload = function(){
var c = new dragClass();//建立對象
c.dragStar("拖動id","移動層id");
}
</script>
其中sd方法中的參數為:
參數一 "拖動id":滑鼠經過時候滑鼠樣式變成移動樣式模樣的元素的id
參數二 "移動層id":即將移動的元素的id
3.建議移動層是絕對位置(position:absolute;).
十三妖 ThirdteenDevil
[qq:181907667] [msn:wl181907667@hotmail.com] [e-mail:thirdteendevil@163.com]
提示：您可以先修改部分代碼再運行
