jQuery拖拽效果和切割效果

来源：互联网发布：组态王与单片机modbus 编辑：程序博客网时间：2024/05/18 21:12
<!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>test</title><style type="text/css">*{margin:0;padding:0}.borderDiv{width:100px;height:100px;background:#FFFFFF;border:1px dashed #FF0000;position:absolute;top:150px;left:390px;cursor:move;z-index:4}.move{width:10px;height:10px;background:#FFFFFF;border:2px solid #FF0000;position:absolute;border-radius:10px;z-index:5;}.left,.right{cursor:e-resize;top:50%;margin-top:-7px;}.leftBottomMove,.rightTopMove{cursor:ne-resize}.leftTopMove,.rightBottomMove{cursor:nw-resize}.top,.bottom{cursor:n-resize}.leftTopMove{top:-7px;left:-7px;}.top{left:50%;margin-left:-7px;top:-7px}.rightTopMove{right:-7px;top:-7px}.left{left:-7px}.right{right:-7px}.leftBottomMove{bottom:-7px;left:-7px}.bottom{bottom:-7px;left:50%;margin-left:-7px}.rightBottomMove{bottom:-7px;right:-7px}</style><script type="text/javascript" src="../jQuery1.7.2/jquery-1.7.2.js"></script></head><script type="text/javascript">jQuery(document).ready(function(){var $borderDiv=$(".borderDiv");$(".borderDiv").mousedown(function(event)  //最外层div层的拖拽{var $border=$(this);var downX=event.pageX;var downY=event.pageY;$(document).mousemove(function(event){$border.css({"left":"+="+(event.pageX-downX)+"px","top":"+="+(event.pageY-downY)+"px"});downX=event.pageX;downY=event.pageY;});return false;});$borderDiv.find("div").mousedown(function(){var className=$(this).attr("class").split(" ")[0]; //获取当前对象的类名var $current=$(this);  //获取当前对象$(document).mousemove(function(event){borderWidth=parseInt($borderDiv.width()) || 0;borderHeight=parseInt($borderDiv.height()) || 0;positionX=$current.offset().left;positionY=$current.offset().top;moveDisX=positionX-event.pageX; //横坐标移动距离moveDisY=positionY-event.pageY; //纵坐标移动距离switch(className){case "right":  //右侧移动,左侧固定$borderDiv.css("width","-="+moveDisX+"px");break;case "bottom":  //下侧移动,上侧固定$borderDiv.css("height","-="+moveDisY+"px");break;case "top": //上侧移动,下侧固定,这时最外层的top也要改变$borderDiv.css({"height":"+="+moveDisY+"px"});$borderDiv.css({"top":"-="+moveDisY+"px"});break;case "left": //左侧移动,右侧固定,这是最外层left也要改变$borderDiv.css({"width":"+="+moveDisX+"px","left":"-="+moveDisX+"px"});break;case "rightTopMove": //右上移动,下侧固定,top值需要改变,左侧固定$borderDiv.css({"width":"-="+moveDisX+"px","height":"+="+moveDisY+"px","top":"-="+moveDisY+"px"});break;case "leftTopMove": //左上移动,右侧固定,left值需要改变,下侧固定,top值需要修改$borderDiv.css({"width":"+="+moveDisX+"px","height":"+="+moveDisY+"px"});$borderDiv.css({"top":"-="+moveDisY+"px","left":"-="+moveDisX+"px"});break;case "rightBottomMove": //右下移动,左侧固定,上侧固定$borderDiv.css({"width":"-="+moveDisX+"px","height":"-="+moveDisY+"px"});break;default: //左下移动,右侧固定,left值需要改变,上侧固定$borderDiv.css({"width":"+="+moveDisX+"px","height":"-="+moveDisY+"px","left":"-="+moveDisX+"px"});};});return false; //防止事件冒泡});$(document).mouseup(function(){$(document).unbind("mousemove");});});</script><body style="background:#AFAFAF; "><div class="borderDiv"><div class="leftTopMove move"></div><div class="top move"></div><div class="rightTopMove move"></div><div class="left move"></div><div class="right move"></div><div class="leftBottomMove move"></div><div class="bottom move"></div><div class="rightBottomMove move"></div></div></body></html>
0 0