jQuery 元素拖拽改变大小

最新推荐文章于 2022-03-29 12:40:59 发布

记忆-碎片

最新推荐文章于 2022-03-29 12:40:59 发布

阅读量469

点赞数

分类专栏： java web 文章标签： html javascript utf-8 function 应用

web 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

java

18 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery 元素拖拽改变大小</title>
    
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        /*
        * jQuery.Resize by wuxinxi007
        * Date: 2011-5-14
        * blog : http://wuxinxi007.cnblogs.com/
        */
        jQuery(document).ready(function (){
            //绑定需要拖拽改变大小的元素对象
            bindResize(document.getElementById('test'));
        });
        function bindResize(el)
        {
            //初始化参数
            //var els = el.style,
            //鼠标的 X 和 Y 轴坐标
           x = 0;
            //邪恶的食指
            jQuery(el).mousedown(function (e)
            {
               diwwidth = jQuery(el).prev().children().width();
                //按下元素后，计算当前鼠标与对象计算后的坐标
                  x = e.clientX;
                //在支持 setCapture 做些东东
                el.setCapture ? (
                //捕捉焦点
                    el.setCapture(),
                //设置事件
                    el.onmousemove = function (ev)
                    {
                        mouseMove(ev || event);
                    },
                    el.onmouseup = mouseUp
                ) : (
                    //绑定事件
                    jQuery(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
                );
                //防止默认事件发生
                e.preventDefault();

            });

            //移动事件
            function mouseMove(e){
               var newWidth = diwwidth + e.clientX - x;
                //宇宙超级无敌运算中...
                //els.width = e.clientX - x + 'px';
               if(newWidth<=80||newWidth>=700){
                   return false;
               }else{
                   jQuery(el).prev().children().width(newWidth);
               }

            }
            //停止事件
            function mouseUp()
            {
                //在支持 releaseCapture 做些东东
                el.releaseCapture ? (
                //释放焦点
                    el.releaseCapture(),
                //移除事件
                    el.onmousemove = el.onmouseup = null
                ) : (
                    //卸载事件
                    jQuery(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
                );
            }
        }
    </script>
    <style type="text/css">
        #div01 { top: 0; left: 0; width: 80px; height: 100px; background: #f1f1f1;
                text-align: center; line-height: 100px; border: 1px solid #CCC; height: 200px;}
    </style>
</head>
<body>
<table height="200" width="50">
<tr>
   <td>
       <div id="div01">
       这是内容
       </div>
   </td>
   <td width="20px" id="test" style="cursor: e-resize;background: red;"></td>
</tr>
</table>
</body>
</html>

记忆-碎片

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 元素拖拽改变大小

jQuery 元素拖拽改变大小 /* * jQuery.Resize by wuxinxi007 * Date: 2011-5-14 * blog : http://wuxinxi007.cnblogs.com/ */ jQuery(document).r
复制链接

扫一扫