Hola todos,
Hoy quiere compartir algo super util que tuve que utilizar uno de mis ultimos projectos. Lastimosamente no puede ponerlo en mi portafolio por razones de confidencialidad. Sin embargo, la necesidad del proyecto era poder manipular imagenes de una manera basica (mover y cambiar el tamaño).
La herramienta que he utilizado para la mayoria de Javascript es JQuery. La razon es sencilla, es facil y rapido de usar.
En este ejemplo, primero creamos una pagina con un Draggable basico.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<style type="text/css">
#draggable { width: 100px; height: 70px; background: silver; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#draggable").draggable();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="draggable">Drag me</div>
</body>
</html>
En este codigo, se crea un <div> con un 'id' = draggable y cuando se inicia la pagina, este se le agrega la propiedad de JQuery llamada "draggable".
JQuery, tambien tiene una serie de propiedades parecidas como:
- Draggable
- Droppable
- Resizable
- Selectable
- Sortable
Asi que si quisieramos hacer esta div Resizable o Dropable o Selectable, no seria ningun problema. Solo se haria los siguente:
<script type="text/javascript">
$(document).ready(function(){
$("#draggable").resizable();
});
</script>
Mi problema con esto era que si yo queria combinar las dos manipulaciones, solo me aceptaba resizable().
<script type="text/javascript">
$(document).ready(function(){
$("#draggable").draggable();
$("#draggable").resizable();
});
</script>
Despues de un poco de googling aprendi como combinar estas manipulaciones y parece que JQuery solo puede hacer un tipo de operacion sobre el objeto y si quieres que el objecto haga varias, entonces debes prender y apagar el propiedad (lo cual puede ser un caos). Asi que para hacer lo mas facil, solo creamos un contenedor para la imagen y listo.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<style type="text/css">
#draggable { width: 100px; height: 70px; background: silver; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#draggable").draggable();
$("#resizable").resizable();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="resizable">
<div id="draggable">Drag me</div>
</div>
</body>
</html>
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5