文档章节

24行代码,让你的网页元素任意放大、缩小、拖拽、移动

黄复得
 黄复得
发布于 2014/06/08 12:34
字数 90
阅读 1622
收藏 35

基于JQuery:

$(document).mousemove(function(e) {
    if (!!this.move) {
        var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
            callback = document.call_down || function() {
                $(this.move_target).css({
                    'top': e.pageY - posix.y,
                    'left': e.pageX - posix.x
                });
            };
 
        callback.call(this, e, posix);
    }
}).mouseup(function(e) {
    if (!!this.move) {
        var callback = document.call_up || function(){};
        callback.call(this, e);
        $.extend(this, {
            'move': false,
            'move_target': null,
            'call_down': false,
            'call_up': false
        });
    }
});



在线演示,原理分析,请查看   http://levi.cg.am/?p=3486

本文转载自:http://levi.cg.am/?p=3486

共有 人打赏支持
黄复得

黄复得

粉丝 14
博文 52
码字总数 6032
作品 0
福州
高级程序员
私信 提问
加载中

评论(2)

巫云
巫云
这个做示例不错,一般干活中还是用jquery ui的库吧,兼容性好一些
徐贺年
徐贺年
好东西!学习了
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.7K
1
一个可拖拽的React标签组件

最近的项目里需要实现一个标签组件,内部标签可任意拖动排序。网上搜了一圈发现几乎没有现成的基于react的组件能很好的满足需求。 较为知名的是react-dnd,然而它似乎只支持把一个元素移到固...

YGYOOO
05/28
0
0
百度地图新手教程7(转载自百度)

工具 1.地图工具概述 2.向地图添加工具 3.通过按钮控制工具的开启和关闭 4.拉框放大工具 地图工具概述 提示:工具已经制作成开源库(lib)对外免费开放,可直接访问JavaScript 开源库。若您需...

长平狐
2013/01/06
2K
0
sonyvegas基本操作及快捷键

sonyvegas基本操作 魅力网络今天用vegas处理音频,把音频就行分割合并,用到的快捷有S 截断 M 打点 G 组合 U 解组 音频变速:右击属性,选典型 自己手动填需要加长到的时间。 分割视频 :U键...

yeybz
06/28
0
0
9款风格华丽的jQuery/CSS3插件

今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧。 1、jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚,鼠标移到菜单...

yykj
2014/01/06
560
1

没有更多内容

加载失败,请刷新页面

加载更多

关于ElasticSearch的使用过程遇到的问题

由于作者从官网下载了ES5.6.10的安装包,解压之后就开始运行ES,前面一切正常。 后面某个查询条件失效。 解决: 1.先试了把单个查询条件撤离出来,当成一个Test来跑,发现还是获取不到值,表...

DoLo-lty
7分钟前
0
0
sed 替换文本内得路径字符等等

1. 句子 sed -i 's%/opt/apache-maven-3.5.3/conf/settings.xml%/data/opt/apache-maven-3.5.3/conf/settings.xml%g' ./*/config.xml 2. 解释 sed linux 一个文件流式处理的工具 2.1 -i 在当......

Aruforce
8分钟前
0
0
mysql_索引

索引类型 哈希表 有序数组 搜索树 MySQL索引 B-树 B+树 innodb的索引 索引维护 关于自增主键的使用 参考 极客时间《mysql实战45讲》

grace_233
8分钟前
0
0
“入乡随俗,服务为主” 发明者量化兼容麦语言啦!

5年时光 我们裹挟前行。发明者量化从筚路蓝缕到步履蹒跚,从以“区块链资产交易”为阵地,再到以“内外盘商品期货”为依托。再到今天全面兼容“麦语言”。每一步,我们始终都在为建立一个优秀...

酒逢知己千杯少
9分钟前
0
0
session深入探讨

简介 session,会话,其实是一个容易让人误解的词。它总跟web系统的会话挂钩,利用session,javaweb项目实现了登录状态的控制。坊间流传,关闭浏览器,就是关闭了web系统的会话。其实浏览器对...

千里明月
11分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部