基础 - 拖拽的简单封装

/**
 * 选中的文本（兼容）
 **/
function funSelectionText() {
    window.getSelection?window.getSelection().toString():document.selection.createRange().text;
}

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

<div id="box" class="box">
    <div class="content">欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢欢乐喜相逢</div>
    <div class="mark">
        <div class="bar"></div>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}
.box {
    position: relative;
    width: 300px;
    height: 500px;
    margin: 100px auto;
    padding-right: 30px;
    overflow: hidden;
    background: #e76345 url("") no-repeat right center;
}
.box .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #bbe7d6 url("") no-repeat right center;
}
.box .mark {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background: #e7d897 url("") no-repeat right center;
}
.box .mark .bar {
    position: absolute;
    top: 0;
    right: 0px;
    width: 100%;
    height: 20px;
    cursor: pointer;
    background: #e78bdc url("") no-repeat right center;
}

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

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

var nMax = oMark.offsetHeight-nBarH;
funDropY(oBar,function (value) {
    return value<=0?0:(value>=nMax?nMax:value);
}, function () {
    var nConSrcH = (oContent.offsetHeight-oBox.offsetHeight)/nMax*oBar.offsetTop;
    oContent.style.top = -nConSrcH+"px";
});