javascript拖拽原理与简单实现方法[demo]

       美国人有一句常用的俗语—“Re-inventing the Wheel”,从字面上来解释就是“重新发明轮子”。可是轮子早已问世,再要去发明岂非劳而无功?

  产品经理发下需求,实施者再到网上搜索代码,也许很快就搜到对应的代码。简单的交互和提交常用的交互,很容易的网上找到相应的代码。一些复杂的交互、定制行比较强的交互,网上找代码就有些困难的。所有复杂交互都是简单交互的组成,所以搜索别人的代码是以学习为主,把别人的基础方法掌握了。拿到需求就不必要到网上搜代码,这样永远也不能提升自己的能力。

  业余时间写的一个,简单拖拽框架代码,但比较容易扩展。

  源码下载:http://yunpan.cn/QGYBju4vcRxZz

       例子:


































 源码:

 1 /**
 2  * jQuery拖拽
 3  * @author: heshimeng1987@qq.com
 4  */
 5 ~function($, window, undefined){
 6     var win = $(window),
 7         doc = $(document),
 8 
 9     drag = function(target, options){
10         return new drag.fn.init(target, options);
11     };
12 
13     drag.fn = drag.prototype = {
14         init: function(target, options){
15 
16             var that = this;
17             this.target = $(target);
18             options = options || {};
19             this.root   = options.root ? $(options.root) : this.target;
20             this.min    = options.min;
21             this.max    = options.max;
22             this.start  = options.start;
23             this.move   = options.move;
24             this.end    = options.end;
25             // this.fixed  = options.fixed === undefined ? true : options.fixed;
26             this.startPosition = {};
27             this.movePosition  = {};
28             var _down = function(e){
29                     that.startPosition = {x: e.clientX-parseInt(that.root.css('left')),
30                                           y: e.clientY-parseInt(that.root.css('top'))};
31                     that.start&&that.start(that.startPosition);
32                     doc.bind('mousemove', _move)
33                     .bind('mouseup', _end);
34                     return false;
35                 },
36                 _move = function(e){
37                     that.movePosition = {x: e.clientX - that.startPosition.x,
38                                          y: e.clientY - that.startPosition.y};
39                     that.limit();
40                     that.root.css({
41                         left: that.movePosition.x,
42                         top: that.movePosition.y
43                     });
44                     that.move&&that.move(that.movePosition);
45                     return false;
46                 },
47                 _end = function(){
48                     doc.unbind('mousemove', _move)
49                     .unbind('mouseup', _end);
50                     that.end&&that.end(that.movePosition);
51                     return false;
52                 };
53 
54             this.target.bind('mousedown',_down);
55         },
56         /**
57          * 移动的位置限制
58          */
59         limit: function(){
60             if(this.min !== undefined){
61                 this.movePosition = {
62                     x: Math.max( this.min.x, this.movePosition.x ),
63                     y: Math.max( this.min.y, this.movePosition.y )
64                 };
65             }
66             if(this.max !== undefined ){
67                 this.movePosition = {
68                     x: Math.min( this.max.x, this.movePosition.x ),
69                     y: Math.min( this.max.y, this.movePosition.y )
70                 };
71             }
72         }
73     };
74     drag.fn.init.prototype = drag.fn;
75     $.drag = drag;
76 
77 
78 }(jQuery, this);


后续将制作一个完善的对话框功能,
当然也可以扩展一些小功能。比如,我工作中编写了一个身高拖拽表单,提供一个效果,这里就不提供源码了:



转载请注明出处:http://www.cnblogs.com/dreamback

如有任何建议或疑问,欢迎留言讨论。



























 例子1.
$.drag('#target1');

例子2.

$.drag('#target2',{ root:'#root2' });

例子3.

最小范围:min:{x:100,y:10}

最大范围:max:{x:900,y:2000}

开始:false

移动:false

结束:false

$.drag('#target3',
{
    root:'#root3',
    min:{x:100,y:10},
    max:{x:900,y:2000},
    start: function(pos){
        $('#isEnd').html('false');
        $('#isStart').html('true, x='+pos.x+', y='+pos.y);
    },
    move: function(pos){
        $('#isMove').html('true, x='+pos.x+', y='+pos.y);
    },
    end: function(pos){
        $('#isEnd').html('true, x='+pos.x+', y='+pos.y);
        $('#isStart').html('false');
        $('#isMove').html('false');
    }
});
posted @ 2013-09-16 08:30  孟回头  阅读(...)  评论(... 编辑 收藏