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