JQuery拖拽元素改变大小尺寸实现代码

来源：互联网发布：大学生网络创业计划书编辑：程序博客网时间：2024/06/08 20:20
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>  <head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>Resizeable</title>    <script type="text/javascript" src="../jquery/jquery.js"></script><!--     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> --><script type="text/javascript">/** jQuery.Resize by Own* Date:2014.01.08*/$(function(){//绑定需要拖拽改变大小的元素对象bindResize(document.getElementById('resizeable'));});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>
0 0