前言

有些時候，用CSS實現一些不是太精確的定位，比如說不是嚴格的居中，或者是想把元素擺在自己想放的地方的時候往往比較麻煩，在沒學JS的時候我也耐著性子調了一陣子，在學了JS拖拽這個功能之後決定要做一個簡單的拖動就能實現CSS定位的JS小外掛

用法

首先把需要拖拽的元素加上drag類名，給相對定位的元素加上wrap 類名。點選拖拽元素放到想放的位置之後鬆開滑鼠，將下方出現的文字框中的值複製下來，右擊複製按鈕可以刪除創建出來的文字框。
複製之後在CSS檔案中增加.drag 屬性並將值貼上到CSS檔案中即可。

程式碼中複製數值到剪貼簿的功能使用了clipboard.js 這個庫，這是它的

/**
 * 生成一個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);
}