DRAG DE IMAGEN CON MOUSE.
Para
- 1- Adjuntar en el <head> jquery y jqueryUI
- 2- .draggable(){} hace que el objeto (en este caso #miimagen) sea arrastrable.
- 3- containment : [x1,y1,x2,y2] hace que el arrastre solo vaya entre el rectángulo dado por las coordenadas, que están dadas DESDE EL DOCUMENTO, por eso hay que usar .offset()
- 4- x1 = x_contenedor - (ancho_imagen - ancho_contenedor) + ancho_borde_left/right
- 5- y1 = y_contenedor - (alto_imagen-alto_contenedor) + ancho_borde_top/bottom
- 6- x2 = x_contenedor + ancho_borde_left/right
- 5- y2 = y_contenedor + ancho_borde_top/bottom
- 6- El resto de javascript está explicado en el código.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DRAG DE IMAGEN CON MOUSE.</title>
<LINK href="../css/estilos.css" type=text/css rel=StyleSheet>
<LINK href="../scripts/jquery-ui.css" type=text/css rel=StyleSheet>
<script src="../scripts/jquery-3.6.4.min.js"></script>
<script src="../scripts/jquery-ui.min.js"></script>
JAVASCRIPT++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<script>
$(document).ready(function(){
//*********************************** tareas al cargar*********************************
var anchodiv=1000; // ancho de la ventana por donde se ve la imagen
var img = $('#miimagen')[0]; // Obtener elemento DOM nativo
var proporcion = img.naturalHeight/img.naturalWidth; // proporcionalidad de la imagen real
var altodiv = anchodiv*proporcion; // alto de la ventana por donde se ve la imagen
//++++++++ajuste del ancho y alto del contenedor de imagen o esta no se muestra +++++++++
$('#contenedor_imagen').css('width',anchodiv + 'px'); // aplica el ancho predeterminado
$('#contenedor_imagen').css('height',altodiv + 'px'); // ajusta la altura de la div en forma proporcional
var ancho = $('#miimagen').width(); // ancho de la imagen actual
var alto = $('#miimagen').height(); // alto de la imagen actual
var x_contenedor = $('#contenedor_imagen').offset().left;
var y_contenedor = $('#contenedor_imagen').offset().top;
//++++++++funcion arrastre de imagen de la imagen++++++++++++++++++++++++++++
var x1 = x_contenedor-(ancho-anchodiv) + 2; // el +2 es por el borde de 2px
var y1 = y_contenedor-( alto - altodiv) +2;
var x2 = x_contenedor +2;
var y2 = y_contenedor + 2;
$("#miimagen").draggable({ //permite que el elemento sea arrastrable.
cursor: "move", // cambia el cursor a doble cruz al arrastrar
containment : [x1,y1,x2,y2],
start: function(event, ui){ //comienzo del arrastre
},
drag: function(event, ui) { //durante el arrastre
},
stop: function(event, ui){
}
});
});
</script>
</head>
STYLE++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<style>
.contenedor_imagen{
margin: 0 auto;
margin-top:50px;
margin-bottom: 50px;
text-align:center;
position: relative;
overflow: hidden;
z-index: 2;
border: #a70404ff solid 2px;
}
.imagen{
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
}
</style>
HTLM+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<body>
<div class="titulo" >
<div>DRAG DE IMAGEN CON MOUSE </div>
</div>
<!-- **********************************IMAGEN************************************ -->
<div class="contenedor_imagen" id="contenedor_imagen">
<img class="imagen" src="img-pasadiapo/lana.jpg" id="miimagen" />
</div>
<!-- ******************************FIN IMAGEN************************************ -->
</body>