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);
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');
}
});
{
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');
}
});
