js中的drag拖拽模板

//第一个是拖拽的div  第二个是  拖拽的位置
function drag(fatherBox, sonBox) {
    var oWin = document.getElementById(`${fatherBox}`)
    var oH2 = oWin.getElementsByTagName(`${sonBox}`)[0]
    var bDrag = false
    var disX = (disY = 0)
    oH2.onmousedown = function (event) {
        var event = event || window.event
        bDrag = true
        disX = event.clientX - oWin.offsetLeft
        disY = event.clientY - oWin.offsetTop
        this.setCapture && this.setCapture()
        return false
    }
    document.onmousemove = function (event) {
        if (!bDrag) return
        var event = event || window.event
        var iL = event.clientX - disX
        var iT = event.clientY - disY
        var maxL = document.documentElement.clientWidth - oWin.offsetWidth
        var maxT = document.documentElement.clientHeight - oWin.offsetHeight
        iL = iL < 0 ? 0 : iL
        iL = iL > maxL ? maxL : iL
        iT = iT < 0 ? 0 : iT
        iT = iT > maxT ? maxT : iT

        oWin.style.marginTop = oWin.style.marginLeft = 0
        oWin.style.left = iL + 'px'
        oWin.style.top = iT + 'px'
       // if(parseInt(oWin.style.top) < $('.container').css('top').replace('px','')) {
         //   oWin.style.top = $('.container').css('top')
       // }
        return false
    }
    document.onmouseup = window.onblur = oH2.onlosecapture = function () {
        bDrag = false
        oH2.releaseCapture && oH2.releaseCapture()
    }
}

直接使用函数就行  要看一下上面的注释   第一个为id  第二个是移动的标签

drag('shade', 'span')