【工作记录】基于CSS+JS可拖拽改变大小、可吸附到边界的DIV

最新推荐文章于 2024-08-03 23:03:36 发布
最新推荐文章于 2024-08-03 23:03:36 发布
阅读量923 收藏 1
点赞数
文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010361276/article/details/131454757
版权

记录一段实现可拖拽、可自动吸附到边界的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            overflow: hidden;
        }
        #pane {
            position: absolute;
            width: 45%;
            height: 45%;
            top: 20%;
            left: 20%;
            margin: 0;
            padding: 0;
            z-index: 99;
            border: 2px solid purple;
            background: #fefefe;
        }

        #title {
            font-family: monospace;
            background: purple;
            color: white;
            font-size: 16px;
            height: 22px;
            text-align: center;
        }

        #ghostpane {
            background: #999;
            opacity: 0.2;
            width: 45%;
            height: 45%;
            top: 20%;
            left: 20%;
            position: absolute;
            margin: 0;
            padding: 0;
            z-index: 98;
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -ms-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
        }
    </style>
    <title>测试div可拖拽</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<div>
    这里是测试文本
</div>
<div id="pane">
    <div id="title">属性配置</div>
</div>
<div id="ghostpane"></div>
<script>
    // Minimum resizable area
    var minWidth = 400;
    var minHeight = 200;

    // Thresholds
    var FULLSCREEN_MARGINS = -10;
    var MARGINS = 4;

    // End of what's configurable.
    var clicked = null;
    var onRightEdge, onBottomEdge, onLeftEdge, onTopEdge;

    var rightScreenEdge, bottomScreenEdge;

    var preSnapped;

    var b, x, y;

    var redraw = false;

    var pane = document.getElementById('pane');
    var ghostpane = document.getElementById('ghostpane');

    function setBounds(element, x, y, w, h) {
        element.style.left = x + 'px';
        element.style.top = y + 'px';
        element.style.width = w + 'px';
        element.style.height = h + 'px';
    }

    function hintHide() {
        setBounds(ghostpane, b.left, b.top, b.width, b.height);
        ghostpane.style.opacity = 0;
    }


    // Mouse events
    pane.addEventListener('mousedown', onMouseDown);
    document.addEventListener('mousemove', onMove);
    document.addEventListener('mouseup', onUp);

    // Touch events
    pane.addEventListener('touchstart', onTouchDown);
    document.addEventListener('touchmove', onTouchMove);
    document.addEventListener('touchend', onTouchEnd);


    function onTouchDown(e) {
        onDown(e.touches[0]);
        e.preventDefault();
    }

    function onTouchMove(e) {
        onMove(e.touches[0]);
    }

    function onTouchEnd(e) {
        if (e.touches.length === 0) onUp(e.changedTouches[0]);
    }

    function onMouseDown(e) {
        onDown(e);
        e.preventDefault();
    }

    function onDown(e) {
        calc(e);

        var isResizing = onRightEdge || onBottomEdge || onTopEdge || onLeftEdge;

        clicked = {
            x: x,
            y: y,
            cx: e.clientX,
            cy: e.clientY,
            w: b.width,
            h: b.height,
            isResizing: isResizing,
            isMoving: !isResizing && canMove(),
            onTopEdge: onTopEdge,
            onLeftEdge: onLeftEdge,
            onRightEdge: onRightEdge,
            onBottomEdge: onBottomEdge
        };
    }

    function canMove() {
        return x > 0 && x < b.width && y > 0 && y < b.height && y < 30;
    }

    function calc(e) {
        b = pane.getBoundingClientRect();
        x = e.clientX - b.left;
        y = e.clientY - b.top;

        onTopEdge = y < MARGINS;
        onLeftEdge = x < MARGINS;
        onRightEdge = x >= b.width - MARGINS;
        onBottomEdge = y >= b.height - MARGINS;

        rightScreenEdge = window.innerWidth - MARGINS;
        bottomScreenEdge = window.innerHeight - MARGINS;
    }

    let e;

    function onMove(ee) {
        calc(ee);

        e = ee;

        redraw = true;

    }

    function animate() {

        requestAnimationFrame(animate);

        if (!redraw) return;

        redraw = false;

        if (clicked && clicked.isResizing) {

            if (clicked.onRightEdge) pane.style.width = Math.max(x, minWidth) + 'px';
            if (clicked.onBottomEdge) pane.style.height = Math.max(y, minHeight) + 'px';

            if (clicked.onLeftEdge) {
                var currentWidth = Math.max(clicked.cx - e.clientX + clicked.w, minWidth);
                if (currentWidth > minWidth) {
                    pane.style.width = currentWidth + 'px';
                    pane.style.left = e.clientX + 'px';
                }
            }

            if (clicked.onTopEdge) {
                var currentHeight = Math.max(clicked.cy - e.clientY + clicked.h, minHeight);
                if (currentHeight > minHeight) {
                    pane.style.height = currentHeight + 'px';
                    pane.style.top = e.clientY + 'px';
                }
            }

            hintHide();

            return;
        }

        if (clicked && clicked.isMoving) {

            if (b.top < FULLSCREEN_MARGINS || b.left < FULLSCREEN_MARGINS || b.right > window.innerWidth - FULLSCREEN_MARGINS || b.bottom > window.innerHeight - FULLSCREEN_MARGINS) {
                // hintFull();
                setBounds(ghostpane, 0, 0, window.innerWidth, window.innerHeight);
                ghostpane.style.opacity = 0.2;
            } else if (b.top < MARGINS) {
                // hintTop();
                setBounds(ghostpane, 0, 0, window.innerWidth, window.innerHeight / 2);
                ghostpane.style.opacity = 0.2;
            } else if (b.left < MARGINS) {
                // hintLeft();
                setBounds(ghostpane, 0, 0, window.innerWidth / 2, window.innerHeight);
                ghostpane.style.opacity = 0.2;
            } else if (b.right > rightScreenEdge) {
                // hintRight();
                setBounds(ghostpane, window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight);
                ghostpane.style.opacity = 0.2;
            } else if (b.bottom > bottomScreenEdge) {
                // hintBottom();
                setBounds(ghostpane, 0, window.innerHeight / 2, window.innerWidth, window.innerWidth / 2);
                ghostpane.style.opacity = 0.2;
            } else {
                hintHide();
            }

            if (preSnapped) {
                setBounds(pane,
                    e.clientX - preSnapped.width / 2,
                    e.clientY - Math.min(clicked.y, preSnapped.height),
                    preSnapped.width,
                    preSnapped.height
                );
                return;
            }

            // moving
            pane.style.top = (e.clientY - clicked.y) + 'px';
            pane.style.left = (e.clientX - clicked.x) + 'px';

            return;
        }

        // This code executes when mouse moves without clicking

        // style cursor
        if (onRightEdge && onBottomEdge || onLeftEdge && onTopEdge) {
            pane.style.cursor = 'nwse-resize';
        } else if (onRightEdge && onTopEdge || onBottomEdge && onLeftEdge) {
            pane.style.cursor = 'nesw-resize';
        } else if (onRightEdge || onLeftEdge) {
            pane.style.cursor = 'ew-resize';
        } else if (onBottomEdge || onTopEdge) {
            pane.style.cursor = 'ns-resize';
        } else if (canMove()) {
            pane.style.cursor = 'move';
        } else {
            pane.style.cursor = 'default';
        }
    }

    animate();

    function onUp(e) {
        calc(e);

        if (clicked && clicked.isMoving) {
            // Snap
            var snapped = {
                width: b.width,
                height: b.height
            };

            if (b.top < FULLSCREEN_MARGINS || b.left < FULLSCREEN_MARGINS || b.right > window.innerWidth - FULLSCREEN_MARGINS || b.bottom > window.innerHeight - FULLSCREEN_MARGINS) {
                // hintFull();
                setBounds(pane, 0, 0, window.innerWidth, window.innerHeight);
                preSnapped = snapped;
            } else if (b.top < MARGINS) {
                // hintTop();
                setBounds(pane, 0, 0, window.innerWidth, window.innerHeight / 2);
                preSnapped = snapped;
            } else if (b.left < MARGINS) {
                // hintLeft();
                setBounds(pane, 0, 0, window.innerWidth / 2, window.innerHeight);
                preSnapped = snapped;
            } else if (b.right > rightScreenEdge) {
                // hintRight();
                setBounds(pane, window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight);
                preSnapped = snapped;
            } else if (b.bottom > bottomScreenEdge) {
                // hintBottom();
                setBounds(pane, 0, window.innerHeight / 2, window.innerWidth, window.innerWidth / 2);
                preSnapped = snapped;
            } else {
                preSnapped = null;
            }

            hintHide();

        }

        clicked = null;

    }
</script>
</body>
</html>

效果展示:
起始状态
吸附效果:
吸附效果

结语

不得不说css和js用的好的话是可以实现很多好玩的功能的，只是我自己对这俩用的还没那么精通。
看到这个好玩的代码就赶紧记录下来，希望能帮助到需要的人吧。

泽济天下
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
鼠标拖拽和边界吸附
qq_42736234的博客
01-03 1312
思路： 1、拖拽 获取元素 绑定事件：当鼠标按下时，可以拖走；鼠标移动时，拖着走；鼠标抬起时，不能拖走 2、边界值判定 当鼠标将要超过边界值是，强行让元素位置固定在边界上 效果： 一、布局 <div id="drag"></div> 二、css样式 * { margin: 0; padding: 0; ...
js案例 元素的拖拽与吸附(touch+translate)
11-29 6937
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale...
实现div任意拖拽，有边界控制，带吸附
sinat_34748348的博客
11-09 518
【代码】实现div任意拖拽，有边界控制，带吸附。
记录一个：js移动端拖拽控制按钮，可以拖动，吸附边框功能
不和贪婪的人相对 不为薄情寡义的人流泪 这世界嘲笑我的人很多 你只是其中一个 不为岁月流逝蹉跎 不随潮流的是否去附和
04-26 2418
实现效果是这样的，可以任意拖拽，低于多少px时，就直接吸附在边上。 代码不解释了，自己看。 前端代码 <a class="app-store" id="btnStore" href="https://itunes.apple.com/cn/app/you-shi-yun/id1352836220?l=zh&amp;ls=1&amp;mt=8"> &l...
CSS+DIV做的可拖动带遮罩层的DIV，圆角也是用CSS实现
luguo0816的专栏
11-24 2193
artdialog artDialog是一个基于javascript编写的对话框组件，精致的界面与易用的接口是它的优势 自适应内容 artDialog的特殊UI框架能够适应内容变化，甚至连外部程序动态插入的内容它仍然能自适应，因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。 完善的接口 它的接口完
可拖拽div
JontyXu的博客
04-08 254
解决当容器拖拽超出边界时会产生滚动条问题。松开鼠标后自动根据最近距离吸附左右侧。
让你的网页动起来:Javascript+CSS拖曳盒子指南
云加速
06-09 84
让网页上的元素具有拖拽功能，可以提升用户体验，尤其是在需要用户交互的场景中。下面是一个使用JavaScript和CSS来实现拖拽效果的基本指南。
vue拖拽方法，有边界控制，带吸附
tdjqqq的博客
06-29 5092
Vue拖拽有很多方法，今天我用了指令去实现 1创建公共指令，全局注册方式，也可以局部指令 gap是附件值，也可以根据具体情况来设置 // v-drag export default { // 当被绑定的元素插入到 DOM 中时…… inserted(el) { let gap = 10 //缝隙：小于缝隙时，则吸附 let parent = el.offsetParent el.onmousedown = function(event) { var eleEvent =.
js可拖拽停靠吸附DIV
12-19
"js可拖拽停靠吸附DIV"这个主题涉及的技术点主要包括：JavaScript基础、DOM操作、事件处理、CSS定位以及可能的自定义动画效果。 1. **JavaScript基础**： - **变量与数据类型**：在实现拖拽功能时，我们需要声明并...
jquery可拖拽布局
08-07
本文将深入探讨“jQuery可拖拽布局”的相关知识点，这是一项利用jQuery实现的用户界面交互功能，允许用户通过鼠标拖动元素来改变其在页面上的位置。 一、jQuery可拖拽效果 jQuery的可拖拽效果是通过jQuery UI库中...
DIV可移动 可实现任意拖动放大缩小
06-22
6. **CSS样式**：为了让div可拖动和可缩放，可能需要设置一些CSS样式，例如设置`position`为`relative`或`absolute`，以便于通过JavaScript更改其位置，同时可能还需要设置`cursor`样式以提供视觉反馈。 7. **代码...
javascript之DIV拖动类 支持在FF下拖动,调用简单
12-01
JavaScript中的DIV拖动功能是一种常见的交互设计，允许用户通过鼠标操作来移动页面上的元素，尤其适用于创建可自定义布局的应用或界面。在这个场景中，提到的`MyMove.Move`函数是一个实现了DIV拖动功能的自定义类，...
Jquery拖拽Div层排序8中拖拽效果
09-15
在jQuery中，可以使用`.draggable()`方法创建可拖动的Div元素。结合CSS定位，可以让Div在页面上自由移动。 二、限制拖动范围 在某些场景下，我们需要限制Div的拖动范围，例如在一个容器内进行拖动。这时可以通过...
【小技巧】CSS如何实现文字溢出显示省略号
qq_65034569的博客
08-03 128
是一种常见的文本截断技术，用于在文本内容超出其容器宽度时，提供一种视觉上的提示，表明文本已被截断。在列表项或者导航菜单中，经常会在列表项或导航菜单中，由于空间有限，当文本内容较长时，可以使用省略号显示文本已被截断。这个方法很多地方都会用到，我们可以直接复制下来，写在一个公共样式当中，下次直接使用类名即可(当然，文字省略了之后，也要得找个时机让他的文字完全显示的做法，只需要设置一个。方法非常简单，只需要添加以下👇三句话就可以实现啦🥳！伪类，让鼠标经过的时候显示全。设置不允许换行，强制文字一行显示。
纯css的loading效果
最新发布
m0_59508634的博客
08-03 186
但通过vuex存储变量，sass进行全局css定义也可以实现，但仅仅适用于小项目使用量不大的情况。但需要注意的是没有办法实现全局注册，因为直接定义一个标签的话在sass里面可能会出现一些问题。其实在日常生活中我们可以采用纯css的组件方式实现loading 的效果。项目的借用的话可以借助状态变量使用v-show来实现在需要的时候进行显示。元素被绝对定位在其父元素的中心，并且其内部的文本大小和对行间距（在之前的文章里面实现loading组件的封装。）是响应式的，基于视口宽度（），该伪元素通过CSS动画（
css中使用data中的变量
weixin_45580774的博客
08-03 130
一、定义变量 data() { return { myColor:"#2a9efb", }; }, 二、在templete中激活 <template> <div class="chat-message" :style="{'--myColor':myColor}"> 你好 </div> </template> 三、在css中使用 .chat-message { background: var(--myColor);
【Dash】使用 HTML 和 CSS 创建图表
u010528690的博客
08-03 753
【代码】【Dash】使用 HTML 和 CSS 创建图表。
css实现文字根据条件渐变
m0_59508634的博客
08-03 191
body。
HTML+CSS+JS可拖拽
06-10
是的，HTML、CSS 和 JavaScript 可以实现元素的拖拽效果。一般的实现方式是使用鼠标事件的监听，通过捕获鼠标的位置变化，实时计算元素的位置并更新到页面上。具体实现方式可以参考一些开源的拖拽库，如 jQuery UI、SortableJS 等。同时，HTML5 还提供了原生的拖拽 API，可以通过简单的属性设置实现元素的拖拽效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

泽济天下

你的鼓励是我最大的动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值