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

48 阅读 0 评论 32 点赞

我是靠谱客的博主舒适奇迹，最近开发中收集的这篇文章主要介绍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

        
});

    
}

});

原理稍后分析，先来看看效果：

简单的拖拽

src="http://jsfiddle.net/aiyuchen/Kpb8p/embedded/result,js,css,html" style="border-width: 0px; border-style: initial; margin: 0px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 28.8px; width: 861.078px; height: 300px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">

将代码剥离，只要写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
});

});

放大、缩小

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

src="http://jsfiddle.net/aiyuchen/FmMc2/embedded/result,js,css,html" style="border-width: 0px; border-style: initial; margin: 0px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 28.8px; width: 861.078px; height: 300px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">

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

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
;

});