//元素在页面中的纵坐标

复制代码 代码如下: { $.fn.extend{ var
boxX = 0; //元素在页面中的横坐标 var boxY = 0; //元素在页面中的纵坐标
var dMouseX = 0; //按下鼠标时的鼠标所在位置的横坐标 var dMouseY = 0;
//按下鼠标时的鼠标所在位置的纵坐标 var mMouseX = 0;
//移动鼠标时的鼠标所在位置的横坐标 var mMouseY = 0;
//移动鼠标时的鼠标所在位置的纵坐标 var moveLenX = 0;
//存放鼠标移动的距离,横向 var moveLenY = 0; //存放鼠标移动的距离,纵向
var isMove = false; //是否拖动层的一个输助”开关” var movingX = 0;
//移动中元素的LEFT值 var movingY = 0; //移动中元素的TOP值
//可视区域最右边的值 var rightest = document.documentElement.clientWidth

  • $.outerWidth(); //可视区域最右边的值 var bottomest =
    document.documentElement.clientHeight – $.outerHeight();
    //获得移动鼠标时的鼠标所在位置的坐标 var getMoveMouse = function{
    mMouseX = move.pageX; mMouseY = move.pageY; }
    //获得元素在页面中的当前的位置 var getbox = function.offset().left; boxY
    = $.top; } //获得鼠标按下时的坐标 var getDownMouse = function{ dMouseX =
    m.pageX; dMouseY = m.pageY; } //获得鼠标移动的距离值 var getMoveLen =
    function(){ moveLenX = mMouseX – dMouseX; moveLenY = mMouseY – dMouseY;
    } //鼠标UP时,关闭移动,即鼠标移动也不会让元素移动; $.mouseup{ isMove =
    false; }) //给元素的TOP绑定事件 $.
    //按下时获得元素的坐标和当前鼠标的坐档; mousedown{ getbox isMove =
    true; }). //移动时获得移动的距离,设置元素的TOP和LEFT值; mousemove{ var
    $this = $; getMoveMouse; if{ //防止元素移出可视区域
    //可视区域浏览器最左边 if{ $this.css; if{ $this.css; }else if{
    $this.css; }else{ $this.css({“top”:boxY+moveLenY}); } }
    //可视区域浏览器最上面 else if{ $this.css; if{ $this.css; }else{
    $this.css({“left”:boxX+moveLenX}); } } //可视区域浏览器最右边 else if{
    $this.css; if{ $this.css; }else{ $this.css({“top”:boxY+moveLenY}); } }
    //可视区域浏览器最下边 else if{ $this.css; if{ $this.css; }else{
    $this.css({“left”:boxX+moveLenX}); } } //其它情况,即在可视区域中间
    else{ $this.css({“left”:boxX+moveLenX,”top”:boxY+moveLenY}); } movingX =
    boxX+moveLenX; movingY = boxY+moveLenY; } }) } }) }) 主要思路:
    1.鼠标移动多少距离,元素就同时移动多少距离,所以要获取到鼠标移动的距离;
    2.鼠标按下,并且移动,才拖动层。所以需要一个“开关”,在移动按下时打开,如果鼠标这里移动了,那么就移动层,如果这个“关闭”,那么鼠标移动时,层也不会一起移动。
    3.获取层元素,在浏览器可视区域的最左、最边,最上、最下的值。并且在拖动层的过程中,把当前层的坐标值,去和这几个值,做比较,如果超过这些值。那么就不能再拖动这个方向,即把值设为最小或最大。
    感觉我这些判断有点复杂,有高手指点下,怎么简化下吗? 下载DEMO

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图