拖拽改变div大小（兼容移动端）

朴灿烈づ我的快乐病毒、 2023-07-24 02:24 3阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>拖拽改变大小（兼容移动端）</title>

/\*

\* jQuery.Resize by Own

\* Date:2014.01.08

\*/

$(function () \{

var target = document.querySelector('\#resizeable');

//初始化参数

var els = target.style,

//鼠标的 X 和 Y 轴坐标

x = y = 0;

//绑定需要拖拽改变大小的元素对象 -----pc端---

bindResize(target);

//  移动端拖拽 -------------------

// 手指按下

target.addEventListener('touchstart', function (e) \{

x = e.targetTouches\[0\].pageX - target.offsetWidth,

y = e.targetTouches\[0\].pageY - target.offsetHeight;

e.preventDefault()

\});

target.addEventListener('touchmove', function (e) \{

//运算中...

els.width = e.targetTouches\[0\].pageX - x + 'px',

els.height = e.targetTouches\[0\].pageY - y + 'px'

\})

\});

function bindResize(el) \{

var els = el.style,

//鼠标的 X 和 Y 轴坐标

x = y = 0;

//鼠标按下事件

$(el).mousedown(function (e) \{

//按下元素后，计算当前鼠标与对象计算后的坐标

x = e.clientX - el.offsetWidth,

y = e.clientY - el.offsetHeight;

//在支持 setCapture 做些东东

el.setCapture ? (

//捕捉焦点

el.setCapture(),

//设置事件

el.onmousemove = function (ev) \{

mouseMove(ev || event)

\},

el.onmouseup = mouseUp

) : (

//绑定事件

$(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)

)

//防止默认事件发生

e.preventDefault()

\});

//移动事件

function mouseMove(e) \{

//运算中...

els.width = e.clientX - x + 'px',

els.height = e.clientY - y + 'px'

//停止事件

function mouseUp() \{

//在支持 releaseCapture 做些东东

el.releaseCapture ? (

//释放焦点

el.releaseCapture(),

//移除事件

el.onmousemove = el.onmouseup = null

) : (

//卸载事件

$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)

)

</script>

</head>

<body>

<div id="resizeable" class="ui-widget-content" style="border: 1px solid red; width: 400px; height: 300px;">

<h3 class="ui-widget-header">Resizable</h3>

</div>

</body>

</html>

拖拽改变div大小（兼容移动端）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 div边框拖拽改变宽度

相关拖拽div

相关拖拽改变div大小（兼容移动端）

相关 JS拖拽div（移动）

相关 html 手机端拖拽效果,JS实现移动端触屏拖拽功能

相关 jQuery拖拽移动

相关 js拖拽div移动

相关 pc端移动端拖拽实现

相关 js实现拖拽改变dom元素大小

相关 js拖拽div例子