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>