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

前段时间写的,蛮长时间了。个人很喜欢,一段很简单的代码,却能够实现很多功能。到底多简单,先来看代码:

基于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
		});
	}
});

原理稍后分析,先来看看效果:

简单的拖拽

将代码剥离,只要写5行就可以实现拖拽了,是不是很简单:

$('#box').mousedown(function(e) {
    var offset = $(this).offset();
    
    this.posix = {'x': e.pageX - offset.left, 'y': e.pageY - offset.top};
    $.extend(document, {'move': true, 'move_target': this});
});

放大、缩小

我们给拖拽增加点功能,支持放大、缩小,先看效果

将代码剥离,原先的代码保留不变,增加一个绑定事件:

var $box = $('#box').mousedown(function(e) {
    var offset = $(this).offset();
    
    this.posix = {'x': e.pageX - offset.left, 'y': e.pageY - offset.top};
    $.extend(document, {'move': true, 'move_target': this});
}).on('mousedown', '#coor', function(e) {
    var posix = {
            'w': $box.width(), 
            'h': $box.height(), 
            'x': e.pageX, 
            'y': e.pageY
        };
    
    $.extend(document, {'move': true, 'call_down': function(e) {
        $box.css({
            'width': Math.max(30, e.pageX - posix.x + posix.w),
            'height': Math.max(30, e.pageY - posix.y + posix.h)
        });
    }});
    return false;
});

这样来实现放大、缩小、拖拽是不是很简答,还能实现很多其他效果,大家慢慢领悟。

原理分析:

放大、缩小、拖拽都离不开在网页上拖动鼠标,对于前端来说就是document的mousemove,当鼠标在网页上移动的时候,无时无刻不在触发mousemove事件,当鼠标触发事件时,什么时候需要执行我们特定的操作,这就是我们要做的了。我在mousemove中增加了几个对象来判定是否进行操作:

  • move:是否执行触发操作
  • move_target:操作的元素对象
  • move_target.posix:操作对象的坐标
  • call_down:mousemove的时候的回调函数,传回来的this指向document
  • call_up:当鼠标弹起的时候执行的回调函数,传回来的this指向document

小提示:

  1. 简单的操作,只需要设定move_target对象,设置move_target的时候不要忘记了move_target.posix哦;
  2. 复杂的操作可以通过call_down、call_up进行回调操作,这个时候是可以不用设置move_target对象的

深入研究

拖拽和放大、缩小实现了,但是有个问题,当我们鼠标点击并滑动的时候,是会选中文本的,为了避免这个问题,大家可以参考这篇文章

难道你以为仅仅这样就可以阻止firefox选中文本了嘛

网页的放大、缩小、拖拽事件就研究到这里了,如果你还有什么疑问,欢迎留言哦~~

最后,有什么问题,大家可以给我留言哦,别忘了关注我的博客哦:

http://list.qq.com/cgi-bin/qf_invite?id=b6eb34388fd016582957d6e50d005146e24fe6b166ee66c0



此条目发表在Javascript分类目录,贴了, , , 标签。将固定链接加入收藏夹。