元素的拖拽和通过元素的拖拽模拟滚动条以及碰撞效果

元素拖拽函数的封装：

function drag(obj) {

	obj.onmousedown = function (ev) {

        var ev = ev || event ;
        var disX = ev.clientX - this.offsetLeft;
        var disY = ev.clientY - this.offsetTop;

        //消除图片和文字的影响
        if ( obj.setCapture ){
            obj.setCapture();
        }

        document.onmousemove = function (ev) {
            var ev = ev || event ;

            //限制拖拽的范围
            var L = ev.clientX - disX;
            var T = ev.clientY - disY;

            if (L<0) {
                L = 0;
            }else if ( L>document.documentElement.clientWidth - obj.offsetWidth ){
                L = document.documentElement.clientWidth - obj.offsetWidth;
            }

            if ( T<0) {
                 T = 0;
            }else if ( T>document.documentElement.clientHeight - obj.offsetHeight ){
                T = document.documentElement.clientHeight - obj.offsetHeight;
            }
            //可以通过改变T L的范围做出磁性吸附的效果
            obj.style.left = L + 'px';
            obj.style.top = T + 'px';
        };

        document.onmouseup = function () {

            if ( obj.releaseCapture ){
                obj.releaseCapture();
            }

			document.onmousemove = obj.onmouseup = null;
        };

        return false //阻止浏览器的默认行为
    }
}

通过元素的拖拽模拟滚动条的效果：

效果展示：

html部分：

<div id="div1">
    <div id="div2"></div>
</div>
<div id="div3">
    <div id="div4">
        一段再苦不堪言的岁月，也需要你有所坚持，相信有所守就会有所获。成长路上的百般波折，终会化成惊喜的回馈；忧郁的日子终会过去，快乐的日子将会到来，

心若向阳，何惧黑夜？<br>生活得最有意义的人，并不是年岁活得最大的人，而是对生活最有感受的人。<br>三千微尘，有多少事情是我们可以预料和控制的？我们无法

预知到未来的每一步行程和轨迹，所以我们苦恼着；我们无法控制事情的发展和结局，所以我们烦躁着。有太多人，像哭着要糖的小孩，只知道一味地索取，却从未在意

自己手中握着的是什么。而后，渐渐失望了、落寞了，心也慢慢失衡了……<br>人的一生，真的像是一趟旅行，沿途有数不尽的泥泞坎坷，但也有看不完的春花秋月。若，

我们的一颗心总被灰暗的风尘所覆盖，目光黯淡，心灵枯涸，我们的人生轨迹又怎会美好？<br>不止一次看到过秋风扫落叶的场面，人之一生，草木一秋，说长也长，说

短也短。因各自生命有限，所以不断努力着，茁壮成长着。树有经历风吹雨打的时候，纵使在秋风里零落成泥，来年终会有绿荫挂满枝头；而人也会经历挫折磨难，纵使

是悲喜得失无常，可终会有苦尽甘来的时候。<br>年少时的苦恼，青春的迷茫，生活的琐碎，总是让人莫名地烦忧，让我们觉得这还未走远的人生，就是一场不可预测的

苦难，仿佛每一步都会让人受伤。<br>到如今，在经历了人生几度悲欢离合之后，再来回忆往昔岁月，彼时的苦难，相对于此时而言，只不过是“少年不识愁滋味”的忧

伤感慨而已。<br>若不是在追寻梦的路上遇到过波折受过伤，我是永远不会懂得失去的忧伤和得到的喜悦的。见过多少虚伪和冷漠，经历过多少颠沛流离，或许才会更加

怀念着当初简单的生活。放慢前行的步履，静下心来，想想最初的最初，我们向往的亦或许仅仅只是一份简单的快乐。虽是粗茶淡饭，却最为朴素真实，虽是寻常日子，

但笑容却最多。<br>内心有阳光，世界就是温暖的。我们虽然无法预知未来，但可以把握当下；我们虽然无法控制事情的发展，但可以尽力而为。许多事，经历过了，才

能懂得；许多梦想，沉淀了，才是美好。能够真实地活着，活好每一个平凡的日子，这本身便是一种莫大的幸福。放开点，生活还是照样过；哭一哭笑一笑，平凡岁月也

精彩。<br>明代人陆绍珩说，一个人活在世上，要敢于“放开眼”，而不向人间“浪皱眉”。心向太阳，不会悲伤；心若向阳，不惧黑夜。凡人的歌要凡人唱，风雨阳光

也要潇洒走一趟。掬一把阳光，整个太阳便在你的手心里，光芒万丈，温暖无限。<br>遇上苦闷莫彷徨，酸甜苦辣咸都要尝一尝。遇上了坎坷要担当，珍惜幸福笑容比天

长。当阴影来临之际，也就是自我沉潜、韬光养晦的时机。即使阴影仍在头顶上盘旋着不愿意离开，心有阳光的人，也不会悲伤，因为在他们的内心深处还留有幸福的余

温。福由心生，内心的幸福才是永远，生活本身是很简单的，幸福也很简单。我们过日子，也得努力放下过多沉重的包袱，不为贪婪所诱惑，择精而担，量力而行，这样

的人生自然是幸福的。<br>你愿做一杯水，还是一片湖呢？有人说，人生像是一个大苦瓜，即使在圣水中浸泡，在圣殿中供养，放入口中，苦味依然不减，这是人生苦的

本质；其实人生更像是一杯无色透明的白开水，放入蜂蜜就是甜的，放入盐粒儿就是咸的，放入茶叶自然就会有一番苦涩涩的味道。心是苦的，天大地宽都不过苦海一片

；心是甜的，人生处处都是曼妙的风景。<br>时光的剪影里，温暖了多少的相遇，又惆怅了多少别离。蓦然回首，聚散分离是何等的平常，悲喜得失也只是一种常态。梦

想百转千回，也抵得上所有无声无息却真真实实的努力。<br>纵然生活不完美，也要经得起世事的颠簸，将人生的一切都根植于生活，相信所有的经历都是值得的，所有

的努力都是有意义的，有所守就会有所获。<br>阴霾终是短暂的，雨后天会晴。心若向阳，必生温暖；心若向阳，何惧黑夜？<br>文章落笔于2017年08月02日<br>
文章原创作者：管淑平

    </div>
</div>

css部分：

 #div1{
            height: 600px;
            width: 30px;
            background: #c2c2c2;
            position: absolute;
            top: 0;
            left: 552px;
        }
        #div2{
            height: 30px;
            width: 30px;
            background: #888888;
            position: absolute;
        }
        #div3{
            height: 600px;
            width: 500px;
            border: 1px solid #000000;
            background: #a0a879;
            color: #ffffff;
            line-height: 20px;
            text-indent: 2em;
            position: absolute;
            left: 50px;
            top: 0;
            overflow: hidden;
        }
        #div4{
            position: absolute;
            top: 0;
            left: 0;
        }

JavaScript部分：

window.onload = function () {
            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');
            var oDiv3 = document.getElementById('div3');
            var oDiv4 = document.getElementById('div4');
            var MaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;


            oDiv2.onmousedown = function (ev) {
                var ev = ev || event ;
                var disY = ev.clientY - this.offsetTop;

                document.onmousemove = function (ev) {
                    var ev = ev || event ;
                    var T = ev.clientY - disY ;

                    if ( T<0 ){
                        T=0;
                    }else if ( T>MaxTop ){
                        T=MaxTop;
                    }
                    oDiv2.style.top = T + 'px';
                    var iScale = T/MaxTop;
                    oDiv4.style.top = (oDiv3.clientHeight - oDiv4.offsetHeight)*iScale + 'px';
                };
                document.onmouseup = function () {
                    document.οnmοusemοve= document.onmouseup = null;
                }
            };
            return false
        }

拖拽过程中的碰撞效果：

效果展示：

html部分：

<!--采用9宫格的方法检测是否碰撞-->
<div id="div1"></div>
<div id="div2"></div>

css部分：

        #div1{
            height: 100px;
            width: 100px;
            position: absolute;
            top: 0;
            left: 0;
            background: #29b3ee;
            cursor: pointer;
        }
        #div2{
            height: 100px;
            width: 100px;
            background: #e4b43e;
            position: absolute;
            top: 500px;
            left: 500px;
            border: 1px solid #888888;
        }

JavaScript部分：

window.onload = function () {
//在此引用了上述函数中的碰撞函数。
	    drag（div1）;
            var oDiv = document.getElementById('div1');


            var oDiv1 = document.getElementById('div2');


            oDiv.onmousedown = function (ev) {

                var ev = ev || event ;
                var disX = ev.clientX - this.offsetLeft;
                var disY = ev.clientY - this.offsetTop;

                if (oDiv.setCapture){
                    oDiv.setCapture();
                }

                document.onmousemove  = function (ev) {

                    var ev = ev || event ;
                    var L = ev.clientX - disX;
                    var T = ev.clientY - disY;

                    var L1 = L;
                    var R1 = L + oDiv.offsetHeight;
                    var T1 = T;
                    var B1 = T + oDiv.offsetWidth;

                    var L2 = oDiv1.offsetLeft;
                    var R2 = oDiv1.offsetLeft + oDiv1.offsetWidth;
                    var T2 = oDiv1.offsetTop;
                    var B2 = oDiv1.offsetTop + oDiv1.offsetHeight;

                    if (L<0){
                        L = 0 ;
                    }
                    if ( L > document.documentElement.clientWidth ){
                        L = document.documentElement.clientWidth;
                    }
                    if (T<0){
                        T = 0 ;
                    }
                    if ( T > document.documentElement.clientWidth ){
                        T = document.documentElement.clientWidth;
                    }

                    oDiv.style.left = L  + 'px';
                    oDiv.style.top = T + 'px';

                    //碰撞检测
                    if ( R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2 ) {
                        oDiv1.style.background = '#e4b43e';
                    }else{
                        oDiv1.style.background = '#daa20f';
                    }
                };

                document.onmouseup = function () {

                    if (oDiv.releaseCapture){
                        oDiv.releaseCapture();
                    }

                    document.onmousemove = document.onmouseup = null;
                }
            };

            return false
        }




改变窗口的大小：



html部分：
<div id="div1"></div>

css部分：

#div1{
            height: 300px;
            width: 300px;
            position: absolute;
            top: 300px;
            left: 500px;
            background: #a0a879;
        }

JavaScript部分：

window.onload = function () {
            var oDiv = document.getElementById('div1');


            oDiv.onmousedown = function (ev) {
                var ev = ev || event;
                var disW = this.offsetWidth;
                var disL = this.offsetLeft;
                var disT = this.offsetTop;
                var disH = this.offsetHeight;
                var dicX = ev.clientX;
                var dicY = ev.clientY;
                var b = '';

                if (ev.clientX > disW + disL - 10){
                    b = 'R';
                }else if ( ev.clientX < disL + 10 ){
                    b = 'L';
                }else if ( ev.clientY < disT + 10 ) {
                    b = 'T';
                }else if ( ev.clientY > disT + disH -10 ){
                    b = 'B';
                }

                document.onmousemove = function (ev) {
                    var ev = ev || event;

                    switch (b) {
                        case 'R':
                            oDiv.style.width = disW+ ( ev.clientX - dicX ) + 'px';
                    }
                    switch (b) {
                        case 'L':
                            oDiv.style.width = disW - ( ev.clientX - dicX ) + 'px';
                            oDiv.style.left = disL + ( ev.clientX - dicX ) + 'px';
                    }
                    switch (b) {
                        case 'B':
                            oDiv.style.height = disH + ( ev.clientY - dicY ) + 'px';
                    }
                    switch (b) {
                        case 'T':
                            oDiv.style.height = disH - ( ev.clientY - dicY ) + 'px';
                            oDiv.style.top = disT + ( ev.clientY - dicY ) + 'px';
                    }
                };

                document.onmouseup = function () {
                        document.onmousemove = document.onmouseup = null;
                };
                return false
            }
        }