自己写的拖动层插件
基于Jquery 功能大体可用但可能有BUG
- JScript code
//最大z-indexvar maxZ_index = 0;//是否启用onDrag回调函数var isOnDrag = false;//onDrag回调函数var onDragFn = {};//是否启用拖动时的回调函数var isMove = false;//onMove回调函数var onMoveFn = {};jQuery.fn.extend({ Drag: function(DragId) { //鼠标是否按下 var isdown = false; //鼠标位置对象 var MousePosition = {}; //鼠标位置心对象 var NewMousePosition = {}; //拖动此obj有用 var obj = {}; //可移动最大div var fObj = $(this); //判断是否传入DragId if (DragId == undefined) { obj = $(this); } else { obj = $("#" + DragId); }; $(document).mousemove(function(e) { if (isdown) { NewMousePosition = $.getMousePosition(e); var left = fObj.css("left"); if (left == "auto") { left = 0; } else { left = left.replace("px", ""); }; var top = fObj.css("top").replace("px", ""); if (top == "auto") { top = 0; } else { top.replace("px", ""); }; fObj.css("left", (Number(left) + NewMousePosition.l - MousePosition.l) + "px"); fObj.css("top", (Number(top) + NewMousePosition.t - MousePosition.t) + "px"); MousePosition = NewMousePosition; if(isMove){ onMoveFn(left,top,NewMousePosition,fObj); }; }; }); obj.mousedown(function(e) { isdown = true; MousePosition = $.getMousePosition(e); //设置maxZ_index if(fObj.css("z-index") <= maxZ_index){ maxZ_index++; fObj.css("z-index",maxZ_index); }; //设置层的浮动 fObj.css("position", "absolute"); //给层定位到层的原有位置 if(fObj.css("left")=="auto"){ fObj.css("left",fObj.attr("offsetLeft")); }; if(fObj.css("top")){ fObj.css("top",fObj.attr("offsetTop")); }; fObj.css("filter","Alpha(opacity=50)"); fObj.css("opacity","0.5"); if(fObj.css("background-color") == "transparent"){ fObj.css("background-color","White"); }; }).mouseup(function() { isdown = false; if(isOnDrag){ onDragFn(fObj.css("left").replace("px", ""),fObj.css("top").replace("px", ""),fObj); } fObj.css("filter",""); fObj.css("opacity",""); }).css("cursor", "move");//设置鼠标手势 //设置z-index if(fObj.css("z-index") == "auto"){ fObj.css("z-index","1"); }; if(fObj.css("z-index") > maxZ_index){ maxZ_index = fObj.css("z-index"); }; if(fObj.html().replace(/(^\s*)|(\s*$)/g, "") == ""){ fObj.html(" "); }; }, onDrag:function(fn){ onDragFn = fn; isOnDrag = true; }, onMove:function(fn){ onMoveFn = fn; isMove = true; }});$.extend({ //获得鼠标坐标 getMousePosition: function(e) { var posx = 0; var posy = 0; if (!e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; }; return { l: posx, t: posy }; }});
使用方式
- HTML code
<!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> <title>无标题页</title> <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="js/Drag.js" type="text/javascript"></script></head><body onselectstart="return false"> <div id="bbbbb" style="width:100px;height:200px;border:solid 1px red;"></div> <div> 当前坐标:<input id="txtXY" type="text" value="未赋值" style="width:300px;" /><br /> 最终坐标:<input id="txtXY2" type="text" value="未赋值" /> </div> <div id="div1" style="width: 100px; border: solid 1px red; height: 100px;"> <div id="div2" style="width: 100px; border-bottom: solid 1px red"> 拖这里 </div> <div> 实例2 </div> </div> <script type="text/javascript"> var ise = false; $(document).ready(function(){ //注册拖动 $("#div1").Drag("div2"); //拖动时的回调函数 $("#div1").onMove(a); //拖动完毕后的回调函数 $("#div1").onDrag(b); }); function a(x,y,obj){ $("#txtXY").val(x+"|"+y+" 鼠标位置:"+obj.l+"|"+obj.t); if(isEnter("bbbbb",obj.l,obj.t)){ $("#bbbbb").css("background-color","red"); ise = true; }else{ $("#bbbbb").css("background-color","transparent"); ise = false; } }; function b(x,y,fObj){ if(ise){ fObj.css("position", ""); fObj.css("left",""); fObj.css("top",""); $("#bbbbb").append(fObj); } $("#txtXY2").val(x+"|"+y); }; function isEnter(objId,mouseX,mouseY){ var obj = $("#"+objId); var minX = obj.attr("offsetLeft"); var maxX = obj.attr("offsetLeft")+obj.attr("offsetWidth"); var minY = obj.attr("offsetTop"); var maxY = obj.attr("offsetTop")+obj.attr("offsetHeight"); if(mouseX > minX && mouseX < maxX && mouseY > minY && mouseY < maxY){ return true; } return false; }; </script></body></html>[解决办法]
upup】
[解决办法]
不错，学习一下
[解决办法]
up...