24行代码,让你的网页元素任意放大、缩小、拖拽、移动
24行代码,让你的网页元素任意放大、缩小、拖拽、移动
黄梦巍 发表于4年前
24行代码,让你的网页元素任意放大、缩小、拖拽、移动
  • 发表于 4年前
  • 阅读 1620
  • 收藏 35
  • 点赞 0
  • 评论 2

标题:腾讯云 新注册用户域名抢购1元起>>>   

基于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

共有 人打赏支持
黄梦巍
粉丝 14
博文 52
码字总数 6032
评论 (2)
徐贺年
好东西!学习了
巫云
这个做示例不错,一般干活中还是用jquery ui的库吧,兼容性好一些
×
黄梦巍
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: