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

Posted 2023-03-27

就是在移动式实现拖拽和div随意的拉伸

参考技术A jQuery拖拽通过八个点改变div大小
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">
<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="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>