原生实现拖拽进行css定位的小工具

前言

有些时候，用CSS实现一些不是太精确的定位，比如说不是严格的居中，或者是想把元素摆在自己想放的地方的时候往往比较麻烦，在没学JS的时候我也耐着性子调了一阵子，在学了JS拖拽这个功能之后决定要做一个简单的拖动就能实现CSS定位的JS小插件

用法

首先把需要拖拽的元素加上

drag

类名，给相对定位的元素加上

wrap

类名。点击拖拽元素放到想放的位置之后松开鼠标，将下方出现的文本框中的值复制下来，右击复制按钮可以删除创建出来的文本框。

复制之后在CSS文件中增加

.drag

属性并将值粘贴到CSS文件中即可。

代码中复制数值到剪贴板的功能使用了

clipboard.js

这个库，这是它的主页 和 GitHub主页 代码在head中创建script标签引入了这个库，特此说明。

/**
 * 生成一个input标签。向剪贴板写数据
 */
var cdnSrcipt = document.createElement("script");
cdnSrcipt.src = 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js';
document.getElementsByTagName("head")[].appendChild(cdnSrcipt);

window.onload = function() {
    var clipboard = new Clipboard('.btn');
    var wrapObj = document.getElementsByClassName("wrap")[];
    var dragObj = document.getElementsByClassName("drag")[];
    var e1, e2;
    var x, y;
    var postioncondition;
    var inpt, copybutton;
    wrapObj.style.position = "relative";
    dragObj.style.position = "absolute"
    /**
     * 参数a为拖动的对象，b为相对定位的对象
     * @param {Object} a
     * @param {Object} b
     */
    function crash(a, b) {
        //处理对象可以拖动的事件
        a.onmousedown = function(e) {
            console.log("agsnsa");
            e1 = e || event;
            document.onmousemove = function(e) {
                e2 = e || event;
                a.style.top = (e2.clientY - e1.offsetY) + "px";
                a.style.left = (e2.clientX - e1.offsetX) + "px";
            }
        }
        inpt = document.createElement("input");
        inpt.id = "inpt";
        copybutton = document.createElement("button");
        copybutton.className = "btn";
        a.onmouseup = function() {
            document.onmousemove = null;
            x = a.style.left;
            y = a.style.top;
            console.log("left: " + x + ";" + "top: " + y);
            postioncondition = "left: " + x + ";" + "top: " + y;
            copybutton.setAttribute("data-clipboard-action", "copy");
            copybutton.setAttribute("data-clipboard-target", "#inpt");
            copybutton.innerHTML = "复制输入框中内容";
            inpt.type = "text";
            document.body.appendChild(inpt);
            document.body.appendChild(copybutton);
            inpt.value = "left: " + x + ";" + "top: " + y;
        }
        copybutton.oncontextmenu = function() {
            document.body.removeChild(inpt);
            document.body.removeChild(copybutton);
            return false;
        }
    }
    crash(dragObj, wrapObj);
}