jquery2014-09-26 18:38:15 8147
Jquery扩展之拉伸改变元素大小,提供了多个方位的拉伸,自动捕捉鼠标是否移动到了元素的边缘(允许拉伸改变元素的位置)。
Jq代码:
$.fn.extend({ Drag: function() { $(this).attr("isDrag", 1); $(this).mousedown(function(e) { if ($(this).attr("isDrag") == 0) return; $(this).attr("drag", 1); $(this).css("position", "absolute"); $(this).css("cursor", "default"); var currentTarget = $(this); var currentDisX = e.pageX - $(this).offset().left; var currentDisY = e.pageY - $(this).offset().top; $(document).mousemove(function(event) { if ($(currentTarget).attr("drag") == 0 || $(currentTarget).attr("mode") == "re") return; var currentX = event.clientX; var currentY = event.clientY; var cursorX = event.pageX - currentDisX; // $(this).offset().left; var cursorY = event.pageY - currentDisY; //-$(this).offset().top; $(currentTarget).css("top", cursorY "px").css("left", cursorX "px"); }); $(document).mouseup(function() { $(currentTarget).attr("drag", 0); }); }); }, DisDrag: function() { $(this).attr("isDrag", 0); $(this).attr("drag", 0); }, Resize: function() { var currentDisTance = 5; var resizeMode = 0; var isResize=false; var isStartResize=false; $(this).mousemove(function(e) { var currentDisX = e.pageX - $(this).offset().left; var currentDisY = e.pageY - $(this).offset().top; if ($(this).width() - currentDisX < currentDisTance && ($(this).height() - currentDisY) < currentDisTance) { $(this).css("cursor", "nw-resize"); } else if ($(this).width() - currentDisX < currentDisTance) { $(this).css("cursor", "e-resize"); } else if ($(this).height() - currentDisY < currentDisTance) { $(this).css("cursor", "n-resize"); } else { if(isStartResize==true)return; $(this).css("cursor", "default"); } }); $(this).mousedown(function(e) { isResize=true; var currentDisX = e.pageX - $(this).offset().left; var currentDisY = e.pageY - $(this).offset().top; if ($(this).width() - currentDisX < currentDisTance && ($(this).height() - currentDisY) < currentDisTance) { $(this).css("cursor", "nw-resize"); $(this).attr("mode", "re"); resizeMode = 0; } else if ($(this).width() - currentDisX < currentDisTance ) { $(this).css("cursor", "e-resize"); $(this).attr("mode", "re"); resizeMode = 1; } else if ($(this).height() - currentDisY < currentDisTance) { $(this).css("cursor", "n-resize"); $(this).attr("mode", "re"); resizeMode = 2; } else { if(isStartResize==true)return; $(this).css("cursor", "default"); $(this).attr("mode", "me"); } var currentTarget = $(this); var offsetWidth=$(this).width()-$(currentTarget).offset().left; var offsetHeight=$(this).height()-$(currentTarget).offset().top; //$(this).css("width",currentWidth currentDisX); $(document).mousemove(function(event) { if ($(currentTarget).attr("mode") == "me"||isResize==false) return; isStartResize=true; var currentX = event.clientX; var currentY = event.clientY; var cursorX = event.pageX - currentDisX; // $(this).offset().left; var cursorY = event.pageY - currentDisY; //-$(this).offset().top; if (resizeMode == 0) $(currentTarget).css("height", cursorY offsetHeight "px").css("width", cursorX offsetWidth "px"); else if (resizeMode == 1) $(currentTarget).css("width", cursorX offsetWidth "px"); else $(currentTarget).css("height", cursorY offsetHeight "px"); }); }); $(document).mouseup(function() { isResize=false; isStartResize=false; }); } });
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Jquery扩展之拉伸改变元素大小,Jq拉伸元素
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/NDE=.html
上一篇 Jquery Div自由拖动排序
下一篇 Jquery拓展之拖放