当前位置:编程学习 > JAVA >>

jQuery-拖动层(在可视区域范围内)

(function($){
    $.fn.extend({
        mydrag:function(){
                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 - $(".top").parent().outerWidth();
               
                //可视区域最右边的值
                var bottomest = document.documentElement.clientHeight - $(".top").parent().outerHeight();
               
               
                //获得移动鼠标时的鼠标所在位置的坐标
                var getMoveMouse = function(move){
                mMouseX = move.pageX;
                mMouseY = move.pageY;
                }
               
                //获得元素在页面中的当前的位置
                var getbox = function(m){
                boxX = $(".box").offset().left;
                boxY = $(".box").offset().top;
                }
               
                //获得鼠标按下时的坐标
                var getDownMouse = function(m){
                dMouseX = m.pageX;
                dMouseY = m.pageY;
                }
               
                //获得鼠标移动的距离值
                var getMoveLen = function(){
                moveLenX = mMouseX - dMouseX;
                moveLenY = mMouseY - dMouseY;
                }
               
               
                //鼠标UP时,关闭移动,即鼠标移动也不会让元素移动;
                $(document).mouseup(function(){
                isMove = false;
                })
               
               
                //给元素的TOP绑定事件
                $(this).
                //按下时获得元素的坐标和当前鼠标的坐档;
                mousedown(function(e){
&n

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,