jq div拖动（移动端和pc端）

来源：互联网发布：nginx 根据请求ip转发编辑：程序博客网时间：2024/05/17 03:59

HTML：

<div style="width: 100px; height: 100px; background-color: darkgray; position:absolute;left: 0px; top: 0px;" id="barrage"></div>

js:

/*拖动事件*/    var cont=$("#barrage");        var contW=$("#barrage").width();    var contH=$("#barrage").height();              var startX,startY,sX,sY,moveX,moveY, disX, disY;            var winW=$(window).width();        var winH=$(window).height();    cont.on({//绑定事件        touchstart:function(e){                         startX = e.originalEvent.targetTouches[0].pageX;    //获取点击点的X坐标             startY = e.originalEvent.targetTouches[0].pageY;    //获取点击点的Y坐标            //console.log("startX="+startX+"************startY="+startY);            sX=$(this).offset().left;//相对于当前窗口X轴的偏移量            sY=$(this).offset().top;//相对于当前窗口Y轴的偏移量            //console.log("sX="+sX+"***************sY="+sY);            leftX=startX-sX;//鼠标所能移动的最左端是当前鼠标距div左边距的位置            rightX=winW-contW+leftX;//鼠标所能移动的最右端是当前窗口距离减去鼠标距div最右端位置            topY=startY-sY;//鼠标所能移动最上端是当前鼠标距div上边距的位置            bottomY=winH-contH+topY;//鼠标所能移动最下端是当前窗口距离减去鼠标距div最下端位置                         },        touchmove:function(e){                          e.preventDefault();            moveX=e.originalEvent.targetTouches[0].pageX;//移动过程中X轴的坐标            moveY=e.originalEvent.targetTouches[0].pageY;//移动过程中Y轴的坐标            //console.log("moveX="+moveX+"************moveY="+moveY);            if(moveX<leftX){moveX=leftX;}                                           if(moveX>rightX){moveX=rightX;}            if(moveY<topY){moveY=topY;}            if(moveY>bottomY){moveY=bottomY;}            $(this).css({                "left":moveX+sX-startX,                "top":moveY+sY-startY,                              });        },        mousedown: function(ev){            var patch = parseInt($(this).css("height"))/2;            //console.log(patch);            $(this).mousemove(function(ev){                var oEvent = ev || event;                //console.log(oEvent.target);                var oX = oEvent.clientX;                var oY = oEvent.clientY;                var t = oY - patch;                var l = oX - patch;                var w = $(window).width() - $(this).width();                var h = $(window).height() - $(this).height();                if(t<0){t = 0}                if(l<0){l=0}                if(t>h){t=h}                if(l>w){l=w}                $(this).css({top:t,left:l})            });            $(this).mouseup(function(){                $(this).unbind('mousemove');            });        }    });

另附一种pc端原生js的写法：

 window.onload = function () {            var oDiv = document.getElementById('oDiv');            var disX = 0, disY = 0;            oDiv.onmousedown = function (ev) {                var oEvent = ev || event;                disX = oEvent.clientX - oDiv.offsetLeft;                disY = oEvent.clientY - oDiv.offsetTop;                document.onmousemove = function (ev) {                    var oEvent = ev || event;                    var l = oEvent.clientX - disX;                    var t = oEvent.clientY - disY;                    console.log(l);                    if(l <= 0){ l = 0}                    if(t < 0){t = 0}                    if(l > document.documentElement.clientWidth - oDiv.offsetWidth){                        l = document.documentElement.clientWidth - oDiv.offsetWidth;                    }                    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 (ev) {                    document.onmousemove = null;                    document.onmouseup = null;                }            }        }

阅读全文

3 0