基础 - 拖拽的简单封装

标签：

/**
 * 禁止选中文本（兼容）
 **/
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);
});

基础 - 拖拽的简单封装

标签：

原文地址：http://www.cnblogs.com/WeWeZhang/p/5769460.html