pc端移动端拖拽实现

	#div1 {
		 100px;
		height: 100px;
		background: red;
		position: absolute;
	}

　　html

<div id="div1">
	</div>

　　js

    window.onload = function () {
        var oDiv = document.getElementById('div1');
        //pc端
        oDiv.onmousedown = function (ev) {
            var oEvent = ev || event; //需要获取和事件相关的信息时使用
            var disX = oEvent.clientX - oDiv.offsetLeft;
            var disY = oEvent.clientY - oDiv.offsetTop;

            document.onmousemove = function (ev) {
                var oEvent = ev || event;
                var l = oEvent.clientX - disX;
                var t = oEvent.clientY - disY;

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

                if (t < 0) {
                    t = 0;
                } else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
                    t = document.documentElement.clientHeight - oDiv.offsetHeight;
                }

                oDiv.style.left = l + 'px';
                oDiv.style.top = t + 'px';
            };

            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
        //移动端
        // 拖拽
        // 获取节点
        var block = document.getElementById("right");
        var oW, oH;
        // 绑定touchstart事件
        oDiv.addEventListener("touchstart", function (e) {
            var touches = e.touches[0];
            oW = touches.clientX - oDiv.offsetLeft;
            oH = touches.clientY - oDiv.offsetTop;
            //阻止页面的滑动默认事件
            document.addEventListener("touchmove", defaultEvent, false);
        }, false);
        oDiv.addEventListener("touchmove", function (e) {
            var touches = e.touches[0];
            var oLeft = touches.clientX - oW;
            var oTop = touches.clientY - oH;
            if (oLeft < 0) {
                oLeft = 0;
            } else if (oLeft > document.documentElement.clientWidth - oDiv.offsetWidth) {
                oLeft = (document.documentElement.clientWidth - oDiv.offsetWidth);
            }
            oDiv.style.left = oLeft + "px";
            oDiv.style.top = oTop + "px";
        }, false);
        oDiv.addEventListener("touchend", function () {
            document.removeEventListener("touchmove", defaultEvent, false);
        }, false);

        function defaultEvent(e) {
            e.preventDefault();
        };
    };