Tutorial #32 del curso de Jquery, en este tutorial seguimos con la librería UI, veremos la utilización del método draggable(), nos permite mover elementos dentro de la página creando mejor interactividad con el usuario.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQuery-UI - Draggable</title>
<link href="jquery-ui/jquery-ui.css" rel="stylesheet">
<style type="text/css">
#mover{
width: 200px;
height: 200px;
background-color: #F46628;
}
</style>
</head>
<body>
<div id="mover" class="ui-widget-content">
<p>Mover</p>
</div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#mover').draggable({
axis:"x",
cursor:"crosshair",
revert:true,
drag: function(){
$('#mover').text('al mover');
},
stop: function(){
$('#mover').text('al detener');
},
});
});
</script>
</body>
</html>