13518219792
jQuery拖拽通过八个点改变div大小
成都创新互联专业为企业提供翁牛特网站建设、翁牛特做网站、翁牛特网站设计、翁牛特网站制作等企业网站建设、网页设计与制作、翁牛特企业网站模板建站服务，10余年翁牛特做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
js:
(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);
html:
!doctype html
html
head
meta charset="utf-8"
titlejQuery拖拽放大缩小插件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="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实现拖拽很简单的：
$(element).myDrag({
parent:'parent', //定义拖动不能超出的外框,拖动范围
randomPosition:true, //初始化随机位置
direction:'all', //方向
handler:false, //把手
dragStart:function(x,y){}, //拖动开始 x,y为当前坐标
dragEnd:function(x,y){}, //拖动停止 x,y为当前坐标
dragMove:function(x,y){} //拖动进行中 x,y为当前坐标
});
具体的可以看这里：jquery.drag.js—实现拖拽效果的插件
有完整的在线实例演示的！！！
正好我最近 在搞 JQUERY 所以改写了个插件
调用：$(".x-movable").Drags({handler:".x-panel-header",zIndex:10000,opacity:0.7，direction:"x"});
你可以参考一下，以下是代插件码:
(function($) {
$.extend($.fn, {
getCss: function(key) {
var v = parseInt(this.css(key));
if (isNaN(v))
return false;
return v;
}
});
$.fn.Drags = function(opts) {
var obg=$(this)
var ps = $.extend({
zIndex: 20,
opacity: .7,
handler: null,
onMove: function() { },
onDrop: function() { }
}, opts);
var dragndrop = {
drag: function(e) {
var dragData = e.data.dragData;
dragData.target.css({
left:(ps.direction=="y")?(dragData.left):(dragData.left + e.pageX - dragData.offLeft),
top: (ps.direction=="x")?(dragData.top):(dragData.top + e.pageY - dragData.offTop)
});
dragData.onMove(e);
},
drop: function(e) {
var dragData = e.data.dragData;
dragData.target.css(dragData.oldCss);
dragData.onDrop(e);
$().unbind('mousemove', dragndrop.drag)
.unbind('mouseup', dragndrop.drop);
}
}
return this.each(function() {
var me = this;
var handler = null;
if (typeof ps.handler == 'undefined' || ps.handler == null){
handler = $(me);
}else{
handler = (typeof ps.handler == 'string' ? $(ps.handler, this) : ps.handle);
}
handler.bind('mousedown', { e: me }, function(s) {
var target = $(s.data.e);
var oldCss = {};
if (target.css('position') != 'absolute') {
try {
target.position(oldCss);
} catch (ex) { }
target.css('position', 'absolute');
}
oldCss.opacity = target.getCss('opacity') || 1;
var dragData = { //初始数据
left: oldCss.left || target.getCss('left') || 0,
top: oldCss.top || target.getCss('top') || 0,
width: target.width() || target.getCss('width'),
height: target.height() || target.getCss('height'),
offLeft: s.pageX,
offTop: s.pageY,
oldCss: oldCss,
onMove: ps.onMove,
onDrop: ps.onDrop,
handler: handler,
target: target
}
target.css('opacity', ps.opacity);
$().bind('mousemove', { dragData: dragData }, dragndrop.drag)
.bind('mouseup', { dragData: dragData }, dragndrop.drop);
});
});
}
})(jQuery);
调用说明：$(".x-movable").Drags({handler:".x-panel-header",zIndex:10000,opacity:0.7，direction:"x"});
其中$(".x-movable")是要被移动的DIV,".x-panel-header"是拖动手柄，科省略。 direction是移动方向，有"x"和"y"两个参数。
下面是我实际运用中更复杂的例子：
$(".x-layout-split-west").Drags({
zIndex:10000,
opacity:0.7,
direction:"x",
onDrop:function(e){
$(".x-layout-split-west").removeClass("x-splitbar-proxy")
var l=parseInt(e.data.dragData.target.css("left"))
if (lps.wmin){l=ps.wmin;}
if (lps.wmax){l=ps.wmax;}
ps.ww=l
ps.cl=l+ps.margins
ps.cw=w-ps.ew-ps.cl-ps.margins
$("#west").css({width:ps.ww});
//$("#west").css({left:l});
//$("#center .x-panel-body").css({width:ps.ch});
$("#center").css({width:ps.cw,left:ps.cl});
$(".x-layout-split-west").css("left",l)
}
html
head
titlejquery或JS拖动DIV左右移动/title
script src="jquery-1.7.1.min.js"/script
style type="text/css"
body {background-color: #fff; }
.win {position: absolute; top: 0px; left: 0px;width: 300px;height: 222px;}
.title {height: 20px;width: 300px; position: absolute;background-color: #0094ff; float: inherit; top: 0px; left: 0px; }
.winCon { height: 200px;width: 298px; position: absolute; border: solid;
border-width: 1px; border-color: #0094ff; border-top: none; float: inherit; left: 0px; top: 20px; }
/style
/head
body onload="showDiv(this,'test1');"
/body
script type="text/javascript"
function showDiv(element, str) {
$(document.body).append("div class='win' id='win" + str + "'div class='title' id='" + str + "'/divdiv class='winCon' 清新自在/div/div");
$("#" + str).mousedown(function (event) {
var offset = $(this).offset();
_x = event.clientX - offset.left;
_y = event.clientY + 20 - offset.top;
$("#win" + str).css({ "top": offset.top - 20 + "px" });
$("#win" + str).mousemove(function (event) {
_xx = event.clientX - _x;
_yy = event.clientY - _y;
this.style.left = _xx + "px";
this.style.top = _yy + "px";
this.style.zIndex = "100";
return false;
});
return false;
});
$("#win" + str).mouseup(function () {
$(this).unbind("mousemove");
$(this).css({ "z-index": "-1" });
return false;
});
}
/script
/html
script type="text/javascript"!--
$(document).ready(function()
{
$(".show").mousedown(function(e)//e鼠标事件
{
$(this).css("cursor","move");//改变鼠标指针的形状
var offset = $(this).offset();//DIV在页面的位置
var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离
var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离
$(document).bind("mousemove",function(ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
{
$(".show").stop();//加上这个之后
var _x = ev.pageX - x;//获得X轴方向移动的值
var _y = ev.pageY - y;//获得Y轴方向移动的值
$(".show").animate({left:_x+"px",top:_y+"px"},10);
});
});
$(document).mouseup(function()
{
$(".show").css("cursor","default");
$(this).unbind("mousemove");
})
})
// --/script
