基础 - 拖拽的简单封装

/** * 禁止选中文本（兼容） **/function funClearSelection() {    window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();}/** * 简单拖拽 **/function funDropSource(obj,bX,bY,funContractX,funContractY,funFinish) {    obj.onmousedown = function (event) {        var oEvent = event||window.event;        var nSparkX = oEvent.clientX-this.offsetLeft;        var nSparkY = oEvent.clientY-this.offsetTop;        var that = this;        document.onmousemove = function (event) {            var oEvent = event || window.event;            var nX = oEvent.clientX-nSparkX;            var nY = oEvent.clientY-nSparkY;            if(funContractX) nX = funContractX(nX);            if(funContractY) nY = funContractY(nY);            if(bX) that.style.left = nX+"px";            if(bY) that.style.top = nY+"px";            funClearSelection();        }        document.onmouseup = function () {            document.onmousemove = null;            if (funFinish) funFinish();        }    }}function funDropX(obj,funContract,funFinish) {    funDropSource(obj,true,false,funContract,null,funFinish);}function funDropY(obj,funContract,funFinish) {    funDropSource(obj,false,true,null,funContract,funFinish);}function funDropBoth(obj,funContractX,funContractY,funFinish) {    funDropSource(obj,true,true,funContractX,funContractY,funFinish);}

var oBox = document.getElementById("box");var oContent = oBox.getElementsByClassName("content")[0];var oMark = oBox.getElementsByClassName("mark")[0];var oBar = oMark.getElementsByClassName("bar")[0];

var nX = oBox.offsetHeight/oContent.offsetHeight*oMark.offsetHeight;oBar.style.height = nX+"px";

var nMax = oMark.offsetHeight-nX;funDropY(oBar,function (value) {    return value<=0?0:(value>=nMax?nMax:value);}, function () {    console.log(oBar.offsetTop/nMax);});