jquery div限定范围拖拽加 8个方向拉伸实例

最新推荐文章于 2024-04-09 17:13:44 发布

VIP文章祥富大大

最新推荐文章于 2024-04-09 17:13:44 发布

阅读量651

点赞数 1

分类专栏：前端学习文章标签： jquery js html5 html

本文链接：https://blog.csdn.net/weixin_41667637/article/details/107781539

版权

由于楼主最近一个项目中需要使用到拖拽加拉伸放大div的功能需求，而且楼主本人是后端的，在各个资源网站上下载拖拽拉伸实例，结果都不是很理想，有的单方向拉伸，不好用于拓展，局限性比较大，所以研究了一下拖拽拉伸的，自己写出了一个实例，由于本人水平有限，代码质量可能不高，小伙伴们可以在以上基础上进行修改，目前实例中左上角的拉伸还有bug ，伙伴们可以自行修复。废话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <title>div四周拉伸</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            position: relative;
        }
        #boo{
            position: relative;
            margin: 100px 200px;
            width: 1200px;
            height: 700px;
            border: 1px solid #000;
        }
        .btx{
           top: 200px;
           left: 300px;
            background: rgb(198, 214, 219);
            height: 200px;
            width: 300px;
            position: absolute;
            cursor: move;
        }
        .big-small{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: none;
        }
        .big-small-btn{
            position: absolute;
            width: 4px;
            height: 4px;
            border: 1px solid #000;
            z-index: 9999;
            
        }
        .left-top{
            top: -6px;
            left: -6px;  
            cursor: nw-resize;
        }
        .left-center{
            top: 50%;
            left: -8px;
            transform: translate(50%,0);
            cursor: w-resize;
        }
        .left-bottom{
            bottom: -6px;
            left: -6px;
            cursor: sw-resize;
        }
        .right-top{
            right: -6px;
            top: -6px;
            cursor: ne-resize;
        }
        .right-center{
            top: 50%;
            right:-2px;
            transform: translate(50%,0);
            cursor:e-resize;
        }
        .right-bottom{
            right: -6px;
            bottom: -6px;
            cursor: se-resize;
        }
        .top-center{
            cursor: n-resize;
            left: 50%;
            top: -6px;
            transform: translate(50%,0);
        }.bottom-center{
            left: 50%;
            bottom: -6px;
            transform: translate(50%,0);
            cursor: s-resize;
        }
    </style>
</head>
<body>
    <div id="boo">
    <div class="btx">       
    </div>
    <div class="btx" style="top:80px;"></div>
    <div class="btx" style="left:80px;"></div>
    <div class="btx" style="top:160px;"></div>
</div>
</body>
<script>

            $(".btx").on("click",function(){
                $(".btx").removeClass('box');
                $(".big-small").remove()
                $(this).addClass("box")
                dargs('box','boo');
            });

 function dargs(classNmae,container){
           var boxs = document.getElementsByClassName(classNmae)[0]; //获取元素
            var x, y; //鼠标相对与div左边，上边的偏移
            var isDrop = false;

最低0.47元/天解锁文章

祥富大大

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery div限定范围拖拽加 8个方向拉伸实例

由于楼主最近一个项目中需要使用到拖拽加拉伸放大div的功能需求，而且楼主本人是后端的，在各个资源网站上下载拖拽拉伸实例，结果都不是很理想，有的单方向拉伸，不好用于拓展，局限性比较大，所以研究了一下拖拽拉伸的，自己写出了一个实例，由于本人水平有限，代码质量可能不高，小伙伴们可以在以上基础上进行修改，目前实例中左上角的拉伸还有bug ，伙伴们可以自行修复。废话不多说，直接上代码<!DOCTYPE html><html lang="en"><head> &lt
复制链接

扫一扫