mootools

References to Documentation

1. Native/Element.js#$
2. Effects/Fx-Styles.js#Fx.Styles
3. Element/Element-Dimensions.js#Element.getLeft
4. Element/Element-Dimensions.js#Element.getTop
5. Element/Element-Event.js#Element.addEvent
6. Element/Element-Form.js#Element.getValue
7. Native/Element.js#Element.setHTML
8. Element/Element-Event.js#Element.fireEvent
9. Element/Element-Event.js#Event
10. Drag/Drag-Base.js#Drag.Base

var target = $('target');
var fx = new Fx.Styles(target, {duration: 1000, wait: false});
var box = $('box');
 
target.setStyles({
	'top': box.getTop(),
	'left': box.getLeft()
});
 
var selectTransition = $('fxTransition');
var selectEase = $('fxEase');
var durationInput = $('duration');
 
var result = $('result');
 
 
$$(selectEase, selectTransition).addEvent('change', function(){
	var transition = selectTransition.getValue();
	if (transition == 'linear'){
		fx.options.transition = Fx.Transitions.linear;
		transition = 'Fx.Transitions.linear';
	} else {
		var ease = selectEase.getValue();
		fx.options.transition = Fx.Transitions[transition][ease];
		transition = 'Fx.Transitions.' + transition + '.' + ease;
	}
	result.setHTML(transition);
});
 
selectEase.fireEvent('change');
 
durationInput.addEvent('blur', function(){
	fx.options.duration = parseFloat(durationInput.getValue());	
});
 
box.addEvent('mousedown', function(event){
	event = new Event(event);
	fx.start({
		'top': [event.page.y - 25],
		'left': [event.page.x - 25]
	});
	event.stop();
});
 
new Drag.Base(target, {
 
	onComplete: function(){
		fx.start(this.s);
	},
 
	onStart: function(){
		this.s = {
			'left': this.element.getLeft(),
			'top': this.element.getTop()
		};
	}
 
});

<div id="fxNavigation">
		<label for="fxTransition">Transition</label>:
		<select id="fxTransition">
			<option value="linear">Linear</option>
			<option value="Quad">Quadratic</option>
			<option value="Cubic">Cubic</option>
			<option value="Quart">Quartic</option>
			<option value="Quint">Quintic</option>
			<option value="Sine">Sinusoidal</option>
			<option value="Expo">Exponential</option>
			<option value="Circ">Circular</option>
			<option value="Bounce">Bouncing</option>
			<option value="Back">Back</option>
			<option value="Elastic">Elastic</option>
		</select>
		<select id="fxEase">
			<option value="easeIn">easeIn</option>
			<option value="easeOut">easeOut</option>
			<option value="easeInOut">easeInOut</option>
		</select>
		<label for="duration">duration</label>: <input type="text" id="duration" value="1000" />
		<b id="result"></b>
</div>
<div id="box">
	<div id="target"></div>
</div>

#box {
	height: 500px;
	width: 100%;
	background: #ccc;
	margin-top: 10px;
	overflow: hidden;
}
 
#target {
	height: 50px;
	width: 50px;
	background: #ff3300;
	position: absolute;
}