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

前端之家收集整理的这篇文章主要介绍了jQuery拖拽通过八个点改变div大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

js:

/**

  • 默认参数
    */
    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">
');
resizePanel.css({
width: width,height: height,top: 0,left: 0,position: 'absolute','background-color': 'rgba(0,0.5)',cursor: 'move',display: 'none'
});
self.appendHandler(resizePanel,$(this));
/**
  • 创建控制点
    */
    var n = $('<div class="n">
');//北
var s = $('<div class="s">
');//南
var w = $('<div class="w">
');//西
var e = $('<div class="e">
');//东
var ne = $('<div class="ne">
');//东北
var nw = $('<div class="nw">
');//西北
var se = $('<div class="se">
');//东南
var sw = $('<div class="sw">');//西南
//<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>公共样式 
self.addHandlerCss([n,s,w,e,ne,nw,se,sw]); 
//<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>各自样式 
n.css({ 
 'top': '-4px','margin-left': '-4px','left': '50%','cursor': 'n-resize' 
}); 
s.css({ 
 'bottom': '-4px','cursor': 's-resize' 
}); 
e.css({ 
 'top': '50%','margin-top': '-4px','right': '-4px','cursor': 'e-resize' 
}); 
w.css({ 
 'top': '50%','left': '-4px','cursor': 'w-resize' 
}); 
ne.css({ 
 'top': '-4px','cursor': 'ne-resize' 
}); 
nw.css({ 
 top: '-4px','cursor': 'nw-resize' 
}); 
se.css({ 
 'bottom': '-4px','cursor': 'se-resize' 
}); 
sw.css({ 
 'bottom': '-4px','cursor': 'sw-resize' 
}); 

// <a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>项目 
self.appendHandler([n,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',});
}
},/**

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',''));
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,width: ow - x,// left: oleft + x
});
org.css({
height: oh - y,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;
});
},/**

window.ZResize = ZResize;

})(jQuery);

html:

<Meta charset="utf-8"> jQuery拖拽放大缩小<a href="/tag/chajian/" target="_blank" class="keywords">插件</a>idrag <Meta http-equiv="Content-Type" content="text/html; charset=utf-8">

猜你在找的jQuery相关文章