EasyDrag es un plugin para la popular librería javascript jQuery el cual te permitirá añadir la funcionalidad de Drag and drop o Arrastrar y soltar a elementos html de tu pagina. Esta librería permite agregar la funcionalidad de drag con sencillas lineas de código, además de ello tiene detectores de eventos con lo cual se pueden controlar los drag dependiendo de las acciones realizadas.
Utilización
Lo primero para utilizar EasyDrag es descargar JQuery y luego jquery.easydrag.js, este ultimo archivo contienen las funciones necesarias para el funcionamiento de esta librería.
El siguiente paso es añadir estas librerías al header de nuestro html, para ello utilizamos los tags script para incluirlas de la forma:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.easydrag.js" type="text/javascript"></script>
Luego el siguiente paso es agregar la función easydrag al elemento que deseamos controlar de la siguiente forma:
<script type="text/javascript">
$(function(){
$("#box1").easydrag();
});
</script>
Uniendo estas lineas tendremos el siguiente código con el cual podemos hacer Drag a un elemento html.
<html>
<head>
<title>EasyDrag Demo</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.easydrag.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#box1").easydrag();
});
</script>
<style type="text/css">
#box1 {
font-family: "Trebuchet MS", Tahoma, Verdana;
background-color: yellow;
padding: 5px;
border: 2px solid orange;
width: 200px;
}
</style>
</head>
<body>
<h3>EasyDrag jQuery Plugin </h3>
<div id="box1">Versión demo de Easy Drag</div>
</body>
</html>
También existe la posibilidad de detectar cuando se termina de hacer el drag, para ello se utiliza el evento ondrop, con el cual se pude llamar a una acción de la siguiente forma:
<script type="text/javascript">
$(function(){
$("#box1").easydrag();
$("#box1").ondrop(function(){ alert("Dropped"); });
});
</script>
Como pueden ver es una forma muy sencilla de crear este tipo de efectos para nuestras páginas html. Les dejo el ejemplo funcionando en: http://samples.unijimpe.net/easydrag.html
Comentarios Total 3 comentarios
Publicado: 18/01/2009 6:40 am
[…] script personalizados…. OPCION 1: jQuey ———————————– Pluging para jQuery http://blog.unijimpe.net/easydrag-jquery-plugin/ demo: http://samples.unijimpe.net/easydrag.html Using JQuery to Add Drag and Drop Support – […]
Publicado: 17/10/2011 12:40 am
Luego de la creación de jQuery-UI, solo basta con agregar:
$(«#div»).sortable();
Saludos
Publicado: 19/10/2011 11:44 am
hay alguna forma de hacer que la imagen no se salga del rago de la pantalla…