drag & resize元素的jQuery实现-阿里云开发者社区

开发者社区> 技术mix呢> 正文

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 

本文转自吕大豹博客园博客,原文链接:http://www.cnblogs.com/lvdabao/p/3847432.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10080 0
javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQue
原文:javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、j...
945 0
[翻译svg教程]svg中矩形元素 rect
svg 元素 是一个矩形元素,用这个元素,可以你可以绘制矩形,设置矩形宽高,边框的宽度颜色,矩形的填充颜色,是否用圆角等 rect 示例 这个矩形的                    位置:用x和y属性定义,需要注意的是这个位置是相对于 这个矩形的父节点定义的 ...
750 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13885 0
为什么阿里巴巴禁止在 foreach 循环里进行元素的 remove/add 操作
我们使用的增强for循环,其实是Java提供的语法糖,其实现原理是借助Iterator进行元素的遍历。
4862 0
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
原文:jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解   jQuery中操纵元素属性的方法:   attr(): 读或者写匹配元素的属性值.
900 0
Tomcat集群配置元素Receiver属性(一)
Tomcat集群配置元素Receiver属性(一)      属性:className、含义:该Receiver实现要使用的完全限定的Java类名。对Tomcat 6.0。有可供使用的两个类:org.apache.catalina.tribes.transport.bio.BioReceiver和org.apache.catalina.tribes.transport.nio.NioReceiver    属性:address、含义:监听人向复制消息的IP地址或完全限定主机名的IP地址。
583 0
跟我学jquery(四)JQuery框架操作元素的属性与样式 .
在前面几篇博客中,我们初步了解了一下jquery的好处,基本语法,还有一些基本函数,这是学习jquery的基础,在这篇博客中,我们一起来学习一下JQuery框架操作元素的属性与样式,在web开发中,修改页面元素的属性和样式是我们需要常用的功能。
782 0
+关注
2969
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载