Mootools Drag.Base class extension which adds support for modifying multiple css properties of different elements simultaneously. Contains Drag.Multi.
MIT-style license.
copyright © 2007 Yevgen Gorshkov
| Drag. Multi.js | Mootools Drag.Base class extension which adds support for modifying multiple css properties of different elements simultaneously. |
| Drag. Multi | Modify multiple css properties of multiple elements based on the position of the mouse. |
| Properties | |
| add | Add element to modify its css properties based on the position of the mouse. |
| remove | Stop all transformations for the passed element. |
| detach | Stop transformations described by the argument. |
Modify multiple css properties of multiple elements based on the position of the mouse.
| options | The options object. |
| handle | required, the $(element) to act as the handle for the draggable elements. |
| onStart | optional, function to execute when the user starts to drag (on mousedown); |
| onBeforeStart | optional, function to execute when the user starts to drag (on mousedown) but before initial properties values are calculated; |
| onComplete | optional, function to execute when the user completes the drag. |
| onSnap | optional, function to execute when the distance between staring point and current mouse position exceeds snap option value |
| onDrag | optional, function to execute at every step of the drag |
| snap | optional, the distance you have to drag before the element starts to respond to the drag. defaults to false |
var drag = new Drag.Multi({
handle: $('handle'),
onBeforeStart: function(){
var size = $(document.body).getSize().scrollSize;
this.shade = new Element('div', {
styles: {
position: 'absolute',
top: 0,
left: 0,
width: size.x,
height: size.y,
cursor: 'move',
'z-index': 100
}
}).inject(document.body);
},
onStart: function(){
$each(arguments, function(el){
el.addClass('ondrag');
});
},
onComplete: function(){
this.shade.remove();
$each(arguments, function(el){
el.removeClass('ondrag');
});
}
});
drag.add($('object'), {
'x': {
limit: [0,440],
style: 'margin-left'
},
'y': {
limit: [0, 198],
style: 'margin-top'
}
});| Properties | |
| add | Add element to modify its css properties based on the position of the mouse. |
| remove | Stop all transformations for the passed element. |
| detach | Stop transformations described by the argument. |
Add element to modify its css properties based on the position of the mouse.
Bind object.
| el | the $(element) to apply the transformations to. |
| options | The options object. |
| bind | The Bind object (see <Bind> below). |
| x | optional, the Modifier object (see below). |
| y | optional, the Modifier object (see below). |
| style | required, the style you want to modify when the mouse moves in an horizontal direction. |
| direction | optional, 1 corresponds to positive direction (style change according to move movement), -1 inverse direction. defaults to 1. |
| limit | optional, array with start and end limit for style value. |
| grid | optional, distance in px for snap-to-grid dragging. |
| fn | optional, object with two properties - direct and inverse functions |
{
step: function(start, current, direction){ return direction * current - start; },
inverse: function(start, current, direction){ return (start + current) / direction; }
}| x | optional, Bind object; change $(element) modifier value according to changes in Bind object. |
| y | optional, Bind object; change $(element) modifier value according to changes in Bind object. |
Stop all transformations for the passed element.
| el | the $(element) to stop transformations for. |