jquery 移动端手指拖拽div四个边框，可上下左右随意拉伸调节div大小

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如何实现多个div窗口任意拖动

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—实现拖拽效果的插件

有完整的在线实例演示的！！！

js/jquery 操作div 移动

正好我最近 在搞 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)

}

jquery或JS拖动DIV左右移动

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

jQuery怎么实现改变div边框和拖动div？

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

网页标题：拖动divjquery,拖动数字组合出最大的数值9653100
分享地址：http://scyanting.com/article/dsciojg.html