1.兩種情況：一是在一個容器內(nèi)拖動，另一個全屏拖動；
2.拖放有兩種實(shí)現(xiàn)方式：一是mousedown..............另一個是H5的draggable屬性；
3.本篇用的是mousedown啥啥的。。
4.寫代碼之前需要了解的小知識有：
（1）offsetWidth包含元素邊寬
（2）clientWidth不包含元素邊寬
5.計算距離思路有兩種：一種先賦值，超出邊界即設(shè)置為固定值；另一種先計算出每個方向的最大值最小值，再賦值。本篇用的是后者（實(shí)不相瞞最開始用了前者。。不過就是算得不大細(xì)。。邊寬什么的。所以最后用了后面的方法）其實(shí)倆都差不多~~

上代碼 ??

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;
        // 拖放區(qū)域是否全屏
        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) => {
                // 鼠標(biāo)移動距離
                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;
    }
}

需要注意的是，這個指令放在固定的容器中完全妹有問題~~
放全屏中時，屏幕不可以滾動才可以。。。。類似大屏啊彈窗啊才可以~~
有個不成熟的想法是弄個類似遮罩層的容器，撐滿屏幕后讓可以拖動的小東西定位在遮罩層內(nèi)。。。但還沒嘗試不一定好用。。

我這個東西抽出極其碎片的時間弄了兩天。。感覺腦子都繡住了。。。。有可以完善了后面再來補(bǔ)充~~哈哈哈哈哈哈哈

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