原生实现拖拽进行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")[0].appendChild(cdnSrcipt);window.onload = function() {    var clipboard = new Clipboard('.btn');    var wrapObj = document.getElementsByClassName("wrap")[0];    var dragObj = document.getElementsByClassName("drag")[0];    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);}