drag.md.svn-base

mooltools源码很不错的源码

Class: Drag {#Drag}
===================

提供在元素进行拖动动作时, 对元素的两个属性值(任意值为整数型的CSS属性,或元素自身的属性)进行改变的功能

(注意: 不仅仅是可以对元素的位置的属性进行改变)


### 实现:

[Events][], [Chain](/Class/Class.Extras#Options)


Drag 方法: constructor {#Drag:constructor}
--------------------------------------------

### 语法:

	var myDragInstance = new Drag(el[, options]);

### 参数:

1. el      - (*element*) 要应用拖动功能的元素的id或引用
2. options - (*object*, 可选) 参见如下可选项:

### 可选项:

* grid      - (*integer*: 默认为 false) 拖动时的步进量(比如设置为10, 则拖动时的效果不是默认的平滑增长, 而是跳格式的增长)
* handle    - (*element*: 默认为 元素自身) 拖动感应元素(即只有在该元素上进行拖动, 才能执行整个拖动效果)
* invert    - (*boolean*: 默认为 false) 是否反向改变值
* limit     - (*object*: 默认为 false) 一个指定属性值改变范围的键值对对象, 格式如: {x: [0, 100], y: [0, 100]}
* modifiers - (*object*: 默认为 {'x': 'left', 'y': 'top'}) 鼠标的拖动所要改变的对应CSS属性
* snap      - (*integer*: 默认为 6) 拖动正式开始响应的距离
* style     - (*boolean*: 默认为 true) 告知modifiers中指定的属性是否为CSS属性(若为元素本身的属性,如scrollTop等,则请设为false,否则会出错)
* unit      - (*string*: 默认为 'px') 所有拖动涉及到的属性整数值的计算单位

### 事件:

* beforeStart - 当Drag实例链接拖动事件前触发. 
* start       - 当用户开始拖动元素时触发(鼠标按下时). 
* snap        - 当拖动到正式开始响应的距离时触发.
* drag        - 在拖动过程中持续触发. 
* complete    - 拖动结束后触发. 

(被拖动的元素作为参数传入事件监听函数)

### 示例:

	var myDrag = new Drag('myDraggable', {
		snap: 0,
		onSnap: function(el){
			el.addClass('dragging');
		},
		onComplete: function(el){
			el.removeClass('dragging');
		}
	});

	var myDragScroller = new Drag('myContainer', {
		style: false,
		invert: true,
		modifiers: {
			x: 'scrollLeft', 
			y: 'scrollTop'
		}
	});

### 备注:

- Drag 需要页面使用[标准模式](http://hsivonen.iki.fi/doctype/)的DOCTYPE

### 另参考:

- [W3Schools: CSS Units][]



Drag 方法: attach {#Drag:attach}
----------------------------------

为拖动感应元素链接事件, 使元素变成可拖动状态.

### 语法:

	myDrag.attach();

### 返回值:

* (*object*) Drag实例

### 示例:

	var myDrag = new Drag('myElement').detach(); 	//此时元素不能被拖动
	
	$('myActivator').addEvent('click', function(){
		alert('Ok, now you can drag.');
		myDrag.attach();	//元素将重新获得拖动功能
	});

### 另参考:

- [$][], [Element:makeDraggable][], [Drag:detach](#Drag:detach), [Element:addEvent][]



Drag 方法: detach {#Drag:detach}
----------------------------------

撤销拖动感应元素上链接的事件, 使元素变成非可拖动状态.

### 语法:

	myDrag.detach();

### 返回值:

* (*object*) Drag实例

### 示例:

	var myDrag = new Drag('myElement');
	
	$('myDeactivator').addEvent('click', function(){
		alert('No more dragging for you, Mister.');
		myDrag.detach();
	});

### 另参考:

- [$][], [Element:makeDraggable][], [Element:addEvent][]



Drag 方法: stop {#Drag:stop}
------------------------------

清除可拖动元素上的所有拖动事件,并触发complete事件.

### 语法:

	myDrag.stop();

### 示例:

	var myDrag = new Drag('myElement', {
		onSnap: function(){
			this.moved = this.moved || 0;
			this.moved++;
			if(this.moved > 100) {
				this.stop();
				alert("Stop! You'll make the Element angry.");
			}
		}
	});



Native: Element {#Element}
==========================

Element 方法: makeResizable {#Element:makeResizable}
------------------------------------------------------

让元素获得拖动改变大小(resizable)的功能. 

(本质是使用可选项modifiers: {'x': 'width', 'y': 'height'}后的Drag, 即对元素的宽度和高度进行改变)

### 语法:

	var myResize = myElement.makeResizable([options]);

### 参数:

1. options - (*object*, 可选) 参见[Drag](#Drag)可选项

### 返回值:

* (*object*) Drag实例

### 示例:

	var myResize = $('myElement').makeResizable({
		onComplete: function(){
			alert('Done resizing.');
		}
	});

### 另参考:

- [Drag](#Drag)



[$]: /Element/Element/#dollar
[Element:addEvent]: /Element/Element.Event/#Element:addEvent
[Element:makeDraggable]: /Drag/Drag.Move/#Element:makeDraggable
[Events]: /Class/Class.Extras#Events
[Chain]: /Class/Class.Extras#Options
[W3Schools: CSS Units]: http://www.w3schools.com/css/css_units.asp