vue 自定义指令 拖放

1.两种情况：一是在一个容器内拖动，另一个全屏拖动；
2.拖放有两种实现方式：一是mousedown..............另一个是H5的draggable属性；
3.本篇用的是mousedown啥啥的。。
4.写代码之前需要了解的小知识有：
（1）offsetWidth包含元素边宽
（2）clientWidth不包含元素边宽
5.计算距离思路有两种：一种先赋值，超出边界即设置为固定值；另一种先计算出每个方向的最大值最小值，再赋值。本篇用的是后者（实不相瞒最开始用了前者。。不过就是算得不大细。。边宽什么的。所以最后用了后面的方法）其实俩都差不多~~

上代码 👇

import Vue from 'vue';

Vue.directive("drag", {
    inserted(drag, binding) {
        // style
        drag.style.cssText += ";cursor: move;";

        let container = drag.parentNode;
        // 外层定位元素信息
        let containerInfo = container.getBoundingClientRect();
        let containerBorderWidth = (container.offsetWidth - container.clientWidth)/2;

        // 视窗信息
        let bodyInfo = document.documentElement;
        // 拖放区域是否全屏
        let full = binding.value.fullScreen;

        drag.onmousedown = (eDown) => {
            if (typeof drag.setCapture !== "undefined") {
                drag.setCapture();
            }
            // 记录drag初始位置
            let offsetLeft = drag.offsetLeft;
            let offsetTop = drag.offsetTop;

            document.onmousemove = (eMove) => {
                // 鼠标移动距离
                let moveX = eMove.clientX - eDown.clientX;
                let moveY = eMove.clientY - eDown.clientY;

                let left = offsetLeft + moveX;
                let top = offsetTop + moveY;

                // 边界：通过计算drag的left和top值来控制
                let minLeft = full ? -containerInfo.left - containerBorderWidth : 0;
                let maxLeft = full ? bodyInfo.clientWidth - drag.offsetWidth - containerInfo.left - containerBorderWidth : container.clientWidth - drag.offsetWidth;
                let minTop = full ? -containerInfo.top - containerBorderWidth : 0;
                let maxTop = full ? bodyInfo.clientHeight - drag.offsetHeight - containerInfo.top - containerBorderWidth : container.clientHeight - drag.offsetHeight;
                // left
                if (left <= minLeft) {
                    left = minLeft;
                }
                // right
                if (left > maxLeft) {
                    left = maxLeft;
                }
                // top
                if (top <= minTop) {
                    top = minTop;
                }
                // bottom
                if (top > maxTop) {
                    top = maxTop;
                }

                // 赋值
                drag.style.cssText += `;left: ${left}px; top: ${top}px;`;
            };

            document.onmouseup = () => {
                document.onmousedown = null;
                document.onmousemove = null;
                if (typeof drag.releaseCapture != "undefined") {
                    drag.releaseCapture();
                }
            };
        };
    }
});

在使用的页面中 ↓ HTML

        <div class="container">
            <div id="drag" v-drag="{fullScreen: true}"></div>
        </div>

css部分 ↓

.container {
    width: 400px;
    height: 300px;
    background: black;
    border: 4px solid red;
    position: relative;
    top: 100px;
    left: 100px;

    #drag {
        width: 100px;
        height: 100px;
        background: red;
        border: 10px solid black;
        border-radius: 8px;

        position: absolute;
        left: -4px;
        top: 10px;
    }
}

需要注意的是，这个指令放在固定的容器中完全妹有问题~~
放全屏中时，屏幕不可以滚动才可以。。。。类似大屏啊弹窗啊才可以~~
有个不成熟的想法是弄个类似遮罩层的容器，撑满屏幕后让可以拖动的小东西定位在遮罩层内。。。但还没尝试不一定好用。。

我这个东西抽出极其碎片的时间弄了两天。。感觉脑子都绣住了。。。。有可以完善了后面再来补充~~哈哈哈哈哈哈哈

tada~~_{一个可以拖放的自定义指令就完成啦}~