mg4377娱乐娱城官网_mg4377娱乐手机版_www.mg4377.com

当前位置: mg4377娱乐娱城官网 > www.mg4377.com > 正文

原生完成鼠标的拖拽作用,小编的开源框架之可

时间:2019-08-17 02:34来源:www.mg4377.com
需求: (1)完成要素可拖拽 (2)自定义拖拽范围 (3)自定义按下接触拖拽的元素 (4)协理拖拽进程中的事件监听 在前端技巧如日方升,快速发展的及时,涌现出了过多独具特殊的

需求:

  (1)完成要素可拖拽

  (2)自定义拖拽范围

  (3)自定义按下接触拖拽的元素

  (4)协理拖拽进程中的事件监听

在前端技巧如日方升,快速发展的及时,涌现出了过多独具特殊的优越条件的开源框架以及优异的开源组件,那么些都是上佳的前端开拓者的本领成果。当然,尽管有那样多现存的开源才能成果供大家再支付中采取,但大家不能仅抱着拿来主义的姿态,只顾拿来用就行,更加多的是要以学习的心气来对待开源技艺,对待前端世界,要多得出他(她)人的经验,且又不忘根本(基础知识),站在一代天骄的双肩上继续前行!

原生完成鼠标的拖拽作用,小编的开源框架之可拖拽功效达成。作用图:(樱草黄方块可任性拖动)

<body>
        <div class="box"></div>
        <script>
            var box = document.getElementsByTagName("div")[0];
            box.onmousedown = function(e){
                var e = e || event;

                var oldX = box.offsetLeft;
                var oldY = box.offsetTop;
                var oldmouseX = e.clientX;
                var oldmouseY = e.clientY;
                box.onmousemove = function(e){
                    var e = e || event;                                            
                    var curX = e.clientX;
                    var curY = e.clientY;
                    this.style.left = oldX (curX-oldmouseX) "px";
                    this.style.top = oldY (curY-oldmouseY) "px";
                }
                document.onmouseup = function(){
                    box.onmousemove = null;
                }
            }


        </script>
    </body>

贯彻思路:

  成分可拖拽的落到实处入眼为,mousedown、mousemove、mouseup三大风浪。mousedown为按下接触拖动的事件,能够定义到成分本人或另外因素;mousemove为拖动范围成分的平地风波,该事件承担重新安装拖动元素的职责属性;mouseup为拖动范围成分的风云,该事件主要为了释放mousemove、mouseup事件。

  为防止当拖动成分内容有极大内容时,重新绘制地方造成的品质影响,能够采纳拖动空成分(代理)来达成拖动进程,当拖动甘休时,再调解实际上元节素的地点就可以。

js拖拽作用

拖拽成效是前面一个比很多事务场景都能应用到的一种广泛的技术,举例弹窗视口的拖拽等,前端世界的过多精美框架组件都装有封装完美的拖拽功效,旁人封装的可以源码,健壮,稳固,同一时间又优雅漂亮,自然是值得大家去上学的。那篇文章首要批注下怎么样用原生js完结三个归纳的拖拽功用。

拖拽原理

对此PC端来讲,拖拽成效无非便是鼠标点击,鼠标早先活动,鼠标放手五个步骤,当然这两个步骤里面有拆分了众多的细节,越是健壮,稳固的代码,对细节的拍卖就越严刻(大家任重先生而道远讲达成四个简练的拖拽功用,也许有个别细节管理得不妥贴,待未来再度举办打包)。

  • 鼠标点击:当鼠标按下点击的时候,必要拖拽的器皿就已应该策动就绪 进去拖拽状态了

  • 鼠标移动:供给拖拽的容器依照鼠标的位移地方而运动,那其间就包蕴的重重对细节的管理,如:当容器某一端的地方达到了浏览器边缘的时候,是不应该不仅浏览器范围区域的,不然会撑出滚动条大概被挡住,这不是叁个很好的效率。那么要哪些把容器的地方调控在浏览器规定的界定区域啊?这里将在分别管理前后左右多个趋势的职务变动。
    1.top端:当容器的最上端达到了浏览器顶端边缘的时候,鼠标移动的可行性继续是前进移动,那么快要设置容器顶上部分的top值始终为0,保障容器地方不会溢出浏览器范围。
    2.bottom端:当容器的平底达到了浏览器底部边缘的时候,鼠标移动的方向接续是向下活动,那么就要设置容器底端的bottom值始终为浏览器可视区域的惊人值减去容器的高度值,保障容器地方不会溢出浏览器范围。
    3.left端:当容器的左端到达了浏览器左端边缘的时候,鼠标移动的趋向接续是向左移动,那么快要设置容器顶上部分的left值始终为0,保障容器地点不会溢出浏览器范围。
    3.right端:当容器的右端到达了浏览器右端边缘的时候,鼠标移动的来头持续是向右移动,那么就要设置容器顶部的right值始终为浏览器可视区域的上涨的幅度值减去容器的上升的幅度值,有限协理容器地点不会溢出浏览器范围。

  • 鼠标放手:代表着容器拖拽截至,截至改动容器的职分。这里也许有个小细节供给注意下,便是,鼠标点击容器计划拖拽时候的地点要和鼠标松手后鼠标在容器中的地点是同一的,意思正是在拖拽的长河个中不管鼠标的职责在怎么着地点,截止拖拽后都要重临原点。

接口参数暴光

圆满的包装往往都以索要搭配庞大的配备参数来维护它的健壮,牢固的。

对于拖拽成效,须求陈设的参数平时必要有以下内容:

  • 亟待拖拽的容器(必选)

  • 要求拖拽的区域(可选)

  • 是还是不是可拖拽,拖拽开关(可选)

  • 是还是不是须求设想拖拽容器(可选)

  • 决定设想拖拽容器的体制(可选)

配备上那个参数,一个粗略的拖拽功用就足以行使了。

拖拽示例核心代码

调用方式

new DragView({
    "dragWrap": document.getElementById("drag_wrap"),    //容器,必选
    "dragableArea": document.getElementById("drag_area"),  //可拖拽区域,可选
    "isDrag": true,  //是否可拖拽,可选
    "isDummyWrap": true, //是否需要虚拟拖拽框,可选
    "dummyWrapClass": "dragview_dummy_wrap2" //控制虚拟拖拽框的样式,可选
})

包裹的有的代码

DragView.prototype = {
        "constructor": DragView,
        "init": function(){
            var that = this;
            var dragMove = document.createElement("div");
            dragMove.setAttribute("class","dragview_move");
            document.body.appendChild(dragMove);
            that.options.isDrag && (that.options.dragableArea.style.cursor = "move");
            that.options.dragableArea.onmousedown = function(e){
                if(!that.options.dragStatus){
                    that.throttle(function(){
                        that.options.isDrag && that.mouseDown(e);
                    },null,0);
                }
            }.bind(that);
        },
        "getEvent": function(e){
            return e ? e : window.event;
        },
        "extend": function(setting,option){
          for(var attr in setting){
              if(typeof option[attr] != "undefined"){
                  setting[attr] = option[attr];
              }
          }
          return setting;
        },
        "throttle": function(fn,context,delay){
            clearTimeout(fn.timeoutId);
            fn.timeoutId = setTimeout(function(){
                fn.call(context);
            },delay);
        },
        "mouseDown": function(e){
            var that = this;
            var dragMoveArea = "";
            var dragWrap = that.options.dragWrap;
            var events = that.getEvent(e);
            var disX = events.clientX - dragWrap.offsetLeft;
            var disY = events.clientY - dragWrap.offsetTop;
            document.getElementsByClassName("dragview_move")[0].style.display = "block";
            dragWrap.style.position = "absolute";
            dragWrap.style.zIndex = "99999";
            that.options.tempDragWrap = that.options.dragWrap;
            if(that.options.isDummyWrap){
                dragMoveArea = document.createElement("div");
                dragMoveArea.setAttribute("class",that.options.dummyWrapClass);
                dragMoveArea.style.width = dragWrap.clientWidth   "px";
                dragMoveArea.style.height = dragWrap.clientHeight   "px";
                dragMoveArea.style.position = "absolute";
                dragMoveArea.style.zIndex = "99999";
                dragMoveArea.style.top = dragWrap.style.top;
                dragMoveArea.style.left = dragWrap.style.left;
                document.body.appendChild(dragMoveArea);
                that.options.tempDragWrap = dragMoveArea;
            }               
            that.options.dragStatus = true;
            document.onmousemove = function(e){
                that.throttle(function(){
                    var _events = that.getEvent(e);
                    that.mouseMove(_events,disX,disY,dragMoveArea);
                },null,0);
            }
            document.onmouseup = function(){
                that.options.dragStatus && that.mouseUp(dragMoveArea);
            }
        },
        "mouseMove": function(_events,disX,disY,dragMoveArea){
            if(this.options.dragStatus){
                var _x = _events.clientX - disX;
                var _y = _events.clientY - disY;
                var _winW = document.documentElement.clientWidth || document.body.clientWidth;
                var _winH=document.documentElement.clientHeight || document.body.clientHeight;
                var option = {
                    "x": _x,
                    "y": _y,
                    "winX": _winW,
                    "winY": _winH,
                    "dragW": this.options.tempDragWrap.offsetWidth,
                    "dragH": this.options.tempDragWrap.offsetHeight
                };
                this.limiteRange(option);
            }
        },
        "mouseUp": function(dragMoveArea){
            this.options.dragWrap.style.left = this.options.tempDragWrap.style.left;
            this.options.dragWrap.style.top = this.options.tempDragWrap.style.top;
            this.options.dragStatus = false;
            dragMoveArea!="" && document.body.removeChild(dragMoveArea);
            document.getElementsByClassName("dragview_move")[0].style.display = "none";
        },
        "limiteRange": function(option){
            if(option.x <= 0 || option.dragW >= option.winX){
                this.options.tempDragWrap.style.left = "0px";
            }else if((option.x   option.dragW) >= option.winX){
                this.options.tempDragWrap.style.left = (option.winX - option.dragW)   "px";
            }else{
                this.options.tempDragWrap.style.left = option.x   "px";
            }

            if(option.y <= 0 || option.dragH >= option.winY){
                this.options.tempDragWrap.style.top = "0px";
            }
            else if((option.y   option.dragH) >= option.winY){
                this.options.tempDragWrap.style.top = (option.winY - option.dragH)   "px";
            }
            else{
                this.options.tempDragWrap.style.top = option.y   "px";
            }
        }
};

突显效果如下链接:https://webproblem.github.io/hello-world/drag-View/drag.html
切切实实示例及源码见本身的 github , ** 如若喜欢,请记得Star哈!**

原创文章,站在前辈们的阅历上的计算,文中如有不正之处,还望指正!

图片 1

编辑:www.mg4377.com 本文来源:原生完成鼠标的拖拽作用,小编的开源框架之可

关键词: 日记本 前端team 程序员笔记