JQuery拖拽通过八个点改变div大小

(function($) {/*** 默认参数*/var defaultOpts = {stage: document, //舞台item: 'resize-item', //可缩放的类名};/*** 定义类*/var ZResize = function(options) {this.options = $.extend({}, defaultOpts, options);this.init();}ZResize.prototype = {init: function() {this.initResizeBox();},/***  初始化拖拽item*/initResizeBox: function() {var self = this;$(self.options.item).each(function () {//创建面板var width = $(this).width();var height = $(this).height();var resizePanel = $('<div class"resize-panel"></div>');resizePanel.css({width: width,height: height,top: 0,left: 0,position: 'absolute','background-color': 'rgba(0,0,0,0.5)',cursor: 'move',display: 'none'});self.appendHandler(resizePanel, $(this));/*** 创建控制点*/var n = $('<div class="n"></div>');//北var s = $('<div class="s"></div>');//南var w = $('<div class="w"></div>');//西var e = $('<div class="e"></div>');//东var ne = $('<div class="ne"></div>');//东北var nw = $('<div class="nw"></div>');//西北var se = $('<div class="se"></div>');//东南var sw = $('<div class="sw"></div>');//西南//添加公共样式self.addHandlerCss([n, s, w, e, ne, nw, se, sw]);//添加各自样式n.css({'top': '-4px','margin-left': '-4px','left': '50%','cursor': 'n-resize'});s.css({'bottom': '-4px','margin-left': '-4px','left': '50%','cursor': 's-resize'});e.css({'top': '50%','margin-top': '-4px','right': '-4px','cursor': 'e-resize'});w.css({'top': '50%','margin-top': '-4px','left': '-4px','cursor': 'w-resize'});ne.css({'top': '-4px','right': '-4px','cursor': 'ne-resize'});nw.css({top: '-4px','left': '-4px','cursor': 'nw-resize'});se.css({'bottom': '-4px','right': '-4px','cursor': 'se-resize'});sw.css({'bottom': '-4px','left': '-4px','cursor': 'sw-resize'});// 添加项目self.appendHandler([n, s, w, e, ne, nw, se, sw], resizePanel);//绑定拖拽缩放事件self.bindResizeEvent(resizePanel, $(this));//绑定触发事件self.bindTrigger($(this));});self.bindHidePanel();},//控制点公共样式addHandlerCss: function(els) {for(var i = 0; i < els.length; i++) {el = els[i];el.css({position: 'absolute',width: '8px',height: '8px',background: '#ff6600',margin: '0','border-radius': '2px',border: '1px solid #dd5500',});}},/***  插入容器*/appendHandler: function(handlers, target) {for(var i = 0; i < handlers.length; i++) {el = handlers[i];target.append(el);}},/***  显示拖拽面板*/triggerResize: function(el) {var self = this;el.siblings(self.options.item).children('div').css({display: 'none'});el.children('div').css({display: 'block'});},/*** 拖拽事件控制 包含8个缩放点  和一个拖拽位置*/bindResizeEvent: function(el) {var self = this;var ox = 0; //原始事件x位置var oy = 0; //原始事件y位置var ow = 0; //原始宽度var oh = 0; //原始高度var oleft = 0; //原始元素位置var otop = 0;var org = el.parent('div');//东var emove = false;el.on('mousedown','.e', function(e) {ox = e.pageX;//原始x位置ow = el.width();emove = true;});//南var smove = false;el.on('mousedown','.s', function(e) {oy = e.pageY;//原始x位置oh = el.height();smove = true;});//西var wmove = false;el.on('mousedown','.w', function(e) {ox = e.pageX;//原始x位置ow = el.width();wmove = true;oleft = parseInt(org.css('left').replace('px', ''));});//北var nmove = false;el.on('mousedown','.n', function(e) {oy = e.pageY;//原始x位置oh = el.height();nmove = true;otop = parseInt(org.css('top').replace('px', ''));});//东北var nemove = false;el.on('mousedown','.ne', function(e) {ox = e.pageX;//原始x位置oy = e.pageY;ow = el.width();oh = el.height();nemove = true;otop = parseInt(org.css('top').replace('px', ''));});//西北var nwmove = false;el.on('mousedown','.nw', function(e) {ox = e.pageX;//原始x位置oy = e.pageY;ow = el.width();oh = el.height();otop = parseInt(org.css('top').replace('px', ''));oleft = parseInt(org.css('left').replace('px', ''));nwmove = true;});//东南var semove = false;el.on('mousedown','.se', function(e) {ox = e.pageX;//原始x位置oy = e.pageY;ow = el.width();oh = el.height();semove = true;});//西南var swmove = false;el.on('mousedown','.sw', function(e) {ox = e.pageX;//原始x位置oy = e.pageY;ow = el.width();oh = el.height();swmove = true;oleft = parseInt(org.css('left').replace('px', ''));});//拖拽var drag = false;el.on('mousedown', function(e) {ox = e.pageX;//原始x位置oy = e.pageY;otop = parseInt(org.css('top').replace('px', ''));oleft = parseInt(org.css('left').replace('px', ''));drag = true;});$(self.options.stage).on('mousemove', function(e) {if(emove) {var x = (e.pageX - ox);el.css({width: ow + x});org.css({width: ow + x});} else if(smove) {var y = (e.pageY - oy);el.css({height: oh + y});org.css({height: oh + y});} else if(wmove) {var x = (e.pageX - ox);el.css({width: ow - x,// left: oleft + x});org.css({width: ow - x,left: oleft + x});} else if(nmove) {var y = (e.pageY - oy);el.css({height: oh - y,// top: otop + y});org.css({height: oh - y,top: otop + y});} else if(nemove) {var x = e.pageX - ox;var y = e.pageY - oy;el.css({height: oh - y,// top: otop + y,width: ow + x});org.css({height: oh - y,top: otop + y,width: ow + x});} else if(nwmove) {var x = e.pageX - ox;var y = e.pageY - oy;el.css({height: oh - y,// top: otop + y,width: ow - x,// left: oleft + x});org.css({height: oh - y,top: otop + y,width: ow - x,left: oleft + x});} else if(semove) {var x = e.pageX - ox;var y = e.pageY - oy;el.css({width: ow + x,height: oh + y});org.css({width: ow + x,height: oh + y});} else if(swmove) {var x = e.pageX - ox;var y = e.pageY - oy;el.css({width: ow - x,// left: oleft + x,height: oh + y});org.css({width: ow - x,left: oleft + x,height: oh + y});} else if(drag) {var x = e.pageX - ox;var y = e.pageY - oy;org.css({left: oleft + x,top: otop + y});}}).on('mouseup', function(e) {emove = false;smove = false;wmove = false;nmove = false;nemove = false;nwmove = false;swmove = false;semove = false;drag = false;});},/***  点击item显示拖拽面板*/bindTrigger: function(el) {var self = this;el.on('click', function(e) {e.stopPropagation();self.triggerResize(el);});},/***  点击舞台空闲区域 隐藏缩放面板*/bindHidePanel: function(el) {var stage = this.options.stage;var item = this.options.item;$(stage).bind('click', function() {$(item).children('div').css({display: 'none'});})}}window.ZResize = ZResize;})(jQuery);

<!doctype html>
<html><head><meta charset="utf-8"><title>jQuery拖拽放大缩小插件idrag</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">.item1 {width: 405px;height: 291px;cursor: move;position: absolute;top: 30px;left: 30px;background-color: #FFF;border: 1px solid #CCCCCC;-webkit-box-shadow: 10px 10px 25px #ccc;-moz-box-shadow: 10px 10px 25px #ccc;box-shadow: 10px 10px 25px #ccc;}.item2 {width: 200px;height: 100px;cursor: move;position: absolute;top: 400px;left: 100px;background-color: #FFF;border: 1px solid #CCCCCC;-webkit-box-shadow: 10px 10px 25px #ccc;-moz-box-shadow: 10px 10px 25px #ccc;box-shadow: 10px 10px 25px #ccc;line-height: 100px;text-align: center;}body {background-color: #F3F3F3;}</style>
</head><body><div id="mydiv" style="width:800px; height:800px; border-style:solid"><div id="div1"  class="resize-item item1"><img src="data:images/dog.png" width="100%" height="100%"></div><div class="resize-item item2">你是我的小小狗</div></div><script src="jquery.min.js"></script><script type="text/javascript" src='jquery.ZResize.js'></script><script type="text/javascript">new ZResize({stage: "#mydiv", //舞台item: '#div1', //可缩放的类名});</script>
</body></html>

JQuery拖拽通过八个点改变div大小相关推荐

jQuery 拖拽窗体
jQuery 拖拽窗体事件今天给大家分享一个简单拖拽事件,可以通过拖拽事件实现数据的传递,已达到良好的交互,可以实现更为可观的效果. 具体来说,只有三部基本的操作: 第一:当鼠标按下时触发的事件(o ...
JQuery 拖拽元素,并移动其他元素位置
JQuery 拖拽元素,并移动其他元素位置 <!DOCTYPE html> <html> <head><meta charset="UTF-8&qu ...
jQuery拖拽图片拼图验证插件
下载地址稳定的jQuery拖拽滑动拼图验证,使用jquery实现的滑动验证插件. dd:
html 拖放插件,DAD – jQuery拖拽/拖放插件
DAD – jQuery拖拽/拖放插件分类:代码日期:2016-08-02 点击(37,745) 下载(1) 来源:未知收藏简介 DAD 是一款基于 jQuery 的拖拽/拖放插件,它支持常见 ...
jquery 磁铁模式控件_利用JQuery拖拽插件实现拖拽效果
asp教程x.cs" inherits="jquerydrag._default" %> $(document).ready(function() { //拖拽方法 ...
jquery拖拽实现UI设计组件
想做一个UI设计的组件,左侧是控件列表,右边是编辑区域,左侧的控件可以重复拖拽到右侧然后进行编辑. 效果草图: 部分js代码: function domop(){//set drag and drop ...
html实现拖拽排序,简单的jquery拖拽排序效果实现代码
步骤: 1.实现随鼠标移动的效果: 2.初始化一个元素及其坐标: 3.拖拽对象的最后坐标,与元素的坐标进行计算和判断来确定要插入的目标元素: 4.用insertBefore 方法插入到目标元素 ...
html5拖拽换位效果演示,H5 实现div拖放位置互换
1 给要进行拖拽的div加上draggable="true" οndrοp="drop(event,this)" οndragstart="drag( ...
html文字字号不改变,如何在不改变div大小的情况下更改HTML / css中的字体大小？...
当我更改div(id ="home")中的文本大小时,它也会更改div的大小.我希望能够在不改变每次div大小的情况下更改文本大小. PROTOTYPE Home 和CSS: bo ...

JQuery拖拽通过八个点改变div大小

JQuery拖拽通过八个点改变div大小相关推荐

最新文章

热门文章