原生js實現圖片圖標拖拽

功能概要：

1. 原生JS實現圖標圖拖拽，拖拽的過程當中不斷輸出該div的left、top值。

2. 用html5的drag來實現拖拽有兼容性問題，使用拖拽插件代碼又不少，而這個拖拽demo代碼少，而且兼容全部瀏覽器，很值得在項目中使用，

css樣式：

#div1{ 
       width: 100px; height: 100px; 
       background-color: #4D4D4D; 
       position: absolute; cursor: pointer; 
       -webkit-box-shadow: 3px 3px 0px 3px #C7C7C7; 
       box-shadow: 3px 3px 3px 0px #C7C7C7; 
   }
   #parent{ 
       width: 500px; height: 500px; 
       border: 1px solid #CDCDCD; 
       position: relative; margin: 0 auto;   //父級元素設置爲：
       background-color: #F4F4F4; 
   }
   .postText{
       width: 500px; height: 30px;margin: 0 auto; background-color: #F4F4F4;
   }
   .postText span{ 
      padding:0px 10px;
   }

html代碼

<div id="parent">
    <div id="div1" onmousemove="posMove(this.id)"></div>
</div>
<div class="postText">
   移動的距離Top：<span id="posTop"></span>Left:<span id="posLeft"></span>
</div>

js代碼及註釋:

function posMove(getdivid) {
        var oDiv = document.getElementById(getdivid);
        var oParent = document.getElementById('parent');
        var sent = {
            l: 10,  //設置div在父元素的活動範圍，10至關於給父div設置padding-left：10;
            r: oParent.offsetWidth - oDiv.offsetWidth,  // offsetWidth:當前對象的寬度， offsetWidth = width+padding+border
            t: 10,
            b: oParent.offsetHeight - oDiv.offsetHeight,
            n: 10
        }
        drag(oDiv, sent);  
    }
    
   /**
     *
     * @param obj:被拖動的div
     * @param sent :設置div在容器中能夠被拖動的區域
     * 原做者的插件下載地址以下: http://www.jq22.com/jquery-info4543
     */
    function drag(obj,sent){

        var dmW = document.documentElement.clientWidth || document.body.clientWidth;
        var dmH = document.documentElement.clientHeight || document.body.clientHeight;

        var sent = sent || {};
        var l = sent.l || 0;
        var r = sent.r || dmW - obj.offsetWidth;
        var t = sent.t || 0;
        var b = sent.b || dmH - obj.offsetHeight;
        var n = sent.n || 10;

        obj.onmousedown = function (ev){
            var oEvent = ev || event;
            var sentX = oEvent.clientX - obj.offsetLeft;
            var sentY = oEvent.clientY - obj.offsetTop;

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

                var slideLeft = oEvent.clientX - sentX;
                var slideTop = oEvent.clientY - sentY;

                if(slideLeft <= l){
                    slideLeft = l;
                }
                if(slideLeft >= r){
                    slideLeft = r;
                }
                if(slideTop <= t){
                    slideTop = t;
                }
                if(slideTop >= b){
                    slideTop = b;
                }

                obj.style.left = slideLeft + 'px';
                obj.style.top = slideTop + 'px';

                document.getElementById('posTop').innerHTML = slideTop;
                document.getElementById('posLeft').innerHTML = slideLeft;

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

            return false;
        }
    }

event對象的clientX,offsetX,screenX,pageX的區別：

ps： 如有錯誤，請指出，謝謝，你們共同窗習進步~~~