Desplazar elementos con jQuery (Ejemplo)
En el siguiente ejemplo se muestra como desplazar un elemento a cualquier parte del documento.
Para activar la opción de movimiento es necesario hacer doble click sobre el elemento, desde ese mismo momento la caja se colocará en la posición dónde se coloque el cursor y se haga click, para finalizar el desplazamiento de la caja con hacer un click sobre el mensaje que aparece en la parte superior basta.
Pruébalo con la siguiente caja...
El código del ejemplo es el siguiente ...
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/*
******http://jquery-manual.blogspot.com******
* *
************Desplazar Elemento***************
* *
*********************************************
*/
$(document).ready(function(){
$("#caja").dblclick(function(){
$("#caja").css
({
borderWidth: "2px",
borderColor: "grey",
borderStyle: "dashed",
position: "absolute"
});
$(window).bind("click", function(e){
{
$("#movimiento").html("<b style='cursor: pointer; font-family: verdana; color: white;'>Detener Movimiento...</b>");
$("#caja").animate({left: e.pageX, top: e.pageY})
}
});
});
$("#movimiento").click(function(){
$(window).unbind("click");
$("#movimiento").html("");
$("#caja").css
({
borderWidth: "0px",
borderColor: "grey",
borderStyle: "dashed"
});
});
});
</script>
<style type="text/css">
#caja{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
</style>
</head>
<body>
<div id="caja" title="Haz doble click sobre mi para desplazarme" style="width: 200px; height: 200px; background: darkred;"><div id="movimiento"></div></div>
</body>
</html>
No hay comentarios:
Publicar un comentario