JS实现拖动div层移动
分类:必发官网

在使用jQuery Mobile Slider时,发现在页面上下拖动时,很容易不小心触发Slider的点击事件,从而造成误操作。为此需要禁用Slider的点击事件。

1.插件壳子

JS实现拖动div层移动

官方API并没有提供禁用点击事件的事件的方法,因此要实现这一功能只能另辟蹊径。留意到点击Slider时都要触发一个mousedown方法改变滑块所处的位置,不妨重写这个方法,在mousedown事件触发时,保持原有的滑块位置不变。

(function($) {

      在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screenX,screenY,offsetX之间的区别!

实现方法:

    $.fn.dragDiv=function(...) {...}

 

  • 首先找到要操作的对象:

})(jQuery);

     PageX: 鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.(只有firefox等标准游览器特有,IE没有)。

图片 1

可以直接在jQuery的基础上扩展插件(用了个立即执行写法)

  clientX: 鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

  • 实现代码:

    1 / 控制滑块任意位置点击事件不可用 / 2 function disableSliderTrack($slider) { 3 4 $slider.bind("mousedown", function (event) { 5 6 var x = event.pageX; 7 var y = event.pageY; 8 9 var $handle = $(this).find(".ui-slider-handle"); 10 11 var left = $handle.offset().left; 12 var right = left + $handle.outerWidth(); 13 var top = $handle.offset().top; 14 var bottom = top + $handle.outerHeight(); 15 16 return (x >= left && x <= right && y >= top && y <= bottom); 17 18 }); 19 }

2.插件变量命名

 

 

用$前缀命名变量 代指jQuery对象 好区分

这两个最主要的区别是 在有滚动条的情况下,pageX是不随滚动条变化而变化,clientx是在可视区域内的距离,不包括滚动条的距离。

  • 在页面加载时初始化所有滑块对象

    1 $(function(){
    2 disableSliderTrack($(".ui-slider-track")); 3 });

3.原理

 

 

本质上就是封装了一个方法,在该方法中定义公用变量,然后处理拖拽对象,给它上一堆基于公用变量(参数)的事件触发逻辑,以达到拖拽功能

  screenX: 鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议.

至此大功告成。

4.应用场景

 

条条大道通罗马,通过重写控件的mousedown方法也能实现对click事件的“禁用”。

在实际开发中一个赌博游戏的显示面板对于超出的信息客户不想用滚动条实现

     offsetX和layerX

5.源代码

 

(function($) {

      offsetX   IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。

    $.fn.dragDiv=function(divWrap) {

 

        return this.each(function() {

      layerX:   firefox特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点 也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点,FF从border开始.

        //$(selector).each(function(index,element))//index从0开始

 

        //each()方法规定为每个匹配元素规定运行的函数。

    pageX,pageY只有firefox特有,IE没有,所以要针对游览器兼容性写个函数,Jquery源码中 这样写的,

            var $divMove = $(this);//鼠标可拖拽区域

 

            var $divWrap = divWrap ? $divMove.parents(divWrap) : $divMove;//整个移动区域,影响到的父类区域(加了个父类判定)

 

            //parents()获得当前匹配元素集合中每个元素的祖先元素,使用选择器进行筛选是可选的。

 

            //.parents(selector)

    所以我们也可以针对写个公用的函数,代码如下:

            var mX =0,mY =0;//定义鼠标X轴Y轴

 

            var dX =0,dY =0;//定义div左、上位置

复制代码

            var eX = $divWrap.offset().left;//起始X坐标

function pageXY(e) {

            var eY = $divWrap.offset().top;//起始Y坐标

    var event = e || window.event;

            var isDown =false;//mousedown标记

 

            if(document.attachEvent) {

    var doc = document.documentElement,

                //ie的事件监听,拖拽div时禁止选中内容,firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;

          body = document.body;

                $divMove[0].attachEvent('onselectstart',function() {

 

                //禁止选择:onselectstart="return false";

    // IE

                    return false;

    if (event.pageX == null && event.clientX !=  null ) {

                });

        var doc = document.documentElement, 

            }

            body = document.body;

            $divMove.mousedown(function(event) {

 

                varevent = event ||window.event;

            event.pageX = event.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );

                mX = event.clientX;

 

                mY = event.clientY;

            event.pageY = event.clientY + ( doc && doc.scrollTop  || body && body.scrollTop  || 0 ) - ( doc && doc.clientTop  || body && body.clientTop  || 0 );

                dX = $divWrap.offset().left;

 

                dY = $divWrap.offset().top;

            return {

                //offset()方法设置或返回被选元素相对于文档的偏移坐标。 经测试确实是文档

                x : event.pageX,

                isDown =true;//鼠标拖拽启动

                y : event.pageY

            });

            }

//                    $(document).mousemove(function(event) {

        }

            $divWrap.mousemove(function(event) {//这儿改写移动触发区域

 

                varevent = event ||window.event;

        // firefox

                varx = event.clientX;//鼠标滑动时的X轴

        return {

                vary = event.clientY;//鼠标滑动时的Y轴

            x : event.pageX,

//测试组件偏移量

            y : event.pageY

//                    dX = $divWrap.offset().left;

        }

//                    dY = $divWrap.offset().top;

    }

//                    console.log( "(" + dX + "," + dY + ")" );

复制代码

                if(isDown) {//isDown判定拖拽触发

offsetX 是IE特有的 layerX是firefox特有的,所以针对这两个也可以写个公用的函数 代码如下:

//                            $divWrap.css({"left": x - mX + dX, "top": y - mY + dY});//div动态位置赋值

 

//使用$(selector).offset({top:value,left:value})方法优化

复制代码

//$divWrap.offset({top:y - mY + dY,left:x - mX + dX})

function offsetXY(e) {

                    if((x - mX +dX) < eX){//鼠标移动方向判定相较于起始坐标

    var event = e || window.event;

                        $divWrap.offset({top:dY,left:x - mX + dX})

    return {

                    }

         x:event.offsetX || event.layerX, 

                }

                 y:event.offsetY || event.layerY 

            });

    }

本文由必发娱乐官方网站发布于必发官网,转载请注明出处:JS实现拖动div层移动

上一篇:零基础如何学习java,要学多久? 下一篇:AngularJS快速入门指南16:Bootstrap
猜你喜欢
热门排行
精彩图文