zoukankan      html  css  js  c++  java
  • drag & resize元素的jQuery实现

      有时项目中会遇到需要拖动元素、拖拽调整元素大小的需求。大部分时候都不想自己写一遍,因为已经有很多现成的例子了。例如jqueryui提供的drag和resize。但是仅仅是为了这么小一个功能就引入一个库,真是有点划不来,性价比太低了撒。于是自己实现了一遍,写了两个通用函数,需要的时候直接把他们考到项目中就可以啦。代码很清爽有木有!

      先说元素拖动,其实就是动态改变元素的left值和top值,当然前提是元素必须是绝对定位或者相对定位的。代码如下:

    function draggable(el){
            el.css('cursor', 'move');
            var eventX, eventY, startX, startY, drag;
            el.on('mousedown', function(event){
                eventX = event.clientX;
                eventY = event.clientY;
                startX = parseInt(el.css('left'));
                startY = parseInt(el.css('top'));
                drag = true;
                if(this.setCapture){this.setCapture();}
            }).on('mouseup', function(event){
                drag = false;
                if(this.releaseCapture){this.releaseCapture();}
            });
            $(document).on('mousemove', function(event){
                if(drag){
                    var l = startX + (event.clientX - eventX);
                    var t = startY + (event.clientY - eventY);
                    el.css({left : l, top : t,});
                }
            }).on('mouseup', function(){
                drag = false;
            });
        }

      看一下效果:

      代码放在了runjs.cn上,查看源码请点这里http://runjs.cn/code/jfqpe2lo

      拖拽调整元素大小稍微复杂点,其实原理与拖动元素也差不多,无非是动态改变的属性多了些,包括left、top、width、height。代码有点长就不贴这里了。先看下效果:

      代码放在了runjs.cn上,查看源码请点这里http://runjs.cn/code/ihiqp2pa

  • 相关阅读:
    百度云满速下载原理与方法
    新版知乎登录之post请求
    requests发送post请求的一些疑点
    Python3实现ICMP远控后门(下)之“Boss”出场
    Python3实现ICMP远控后门(中)之“嗅探”黑科技
    Python3实现ICMP远控后门(上)_补充篇
    Python3实现ICMP远控后门(上)
    反射-Class
    希尔排序(java)
    插入排序(java)
  • 原文地址:https://www.cnblogs.com/lvdabao/p/3847432.html
Copyright © 2011-2022 走看看