Les vengo a traer este código que desarrolle usando la librería
jQuery de Javascript. Lo he estado utilizando en proyectos como los
Build de Baldosas, IsoMap e incluso mi mas reciente proyecto, DivEditor.
Es muy sencillo y fácil de entender, sin mencionar que
no usa ninguna clase de Plugins especiales. A continuación se los dejo.
Código:
<html>
<head>
<meta name="author" content="Joaquin A." />
<meta name="twitter" content="JoakoM010" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
div#cont{
width: 50px;
height: 50px;
background: orange;
border: 1px solid black;
cursor: move;
position: absolute;
}
div#cont:hover{ background: red; }
</style>
<script>
/*!
* Script Arrastrar Elemento [Drag] - jQuery
* Creado por Joaquin A. (SoyJoaquin. | -Null-)
*
* Contacto:
* Twitter: @JoakoM010
* Skype: SoyJoaquin.
*
* Nota: Es obligatorio que el elemento a mover tenga la propiedad position: absolute de CSS.
*/
$(document).ready(function (){
var elemento = $('#cont'); // Elemento a mover...
var press = false;
var estaX = elemento.position().left;
var estaY = elemento.position().top;
elemento.mousedown(function(a){
press = true;
pX = a.pageX;
pY = a.pageY;
});
$(document).mouseup(function(){
press = false;
estaX = x;
estaY = y;
}).mousemove(function(b){
if(press){
x = Math.round((b.pageX - pX) + estaX);
y = Math.round((b.pageY - pY) + estaY);
elemento.css({
"top": y,
"left": x
});
}
});
});
</script>
</head>
<body>
<div id="cont"></div>
</body>
</html>
Espero que les sea de utilidad.
Saludos.