Exemplo de Drag and Drop com javascript – Arrastando um elemento na tela

Exemplo rápido com js puro.

Arrastando um elemento atraves de um palco, no eixo x

/**
	http://www.webreference.com/programming/javascript/mk/column2/index.html
	http://www.youngpup.net/projects/dom-drag/demo.html
 */

<div id="stage">
	<div id="obj" class="fright">
		
	</div><!-- #obj -->
</div><!-- #stage -->
<style type="text/css">
#stage {
	position: relative;
	height: 50px;
	width: 900px;
	margin: 200px auto;
	background: #ff0;
}
#obj {
	background: #f00;
	height: 100px;
	width: 100px;
	position: absolute;
	top: -25px;
	left: 0;
}
.fright { float: right; }
</style>
<script>
var dragObj = null,
i = 0,
stage = document.getElementById('stage'),
obj = document.getElementById('obj');

document.onmousemove = function(e){
	if( dragObj ) {

		if( e.clientX>stage.offsetLeft && e.clientX<(stage.offsetWidth+stage.offsetLeft-obj.offsetWidth) ){
			dragObj.style.left = e.clientX - stage.offsetLeft;
		}
	}
};
document.onmouseup = function(){
	dragObj = null;
};
obj.onmousedown = function(e){
	dragObj = this;
	console.log('down', e);
};

</script>

Demonstração