Un complemento de jquery todos los días: arrastre y suelte para cambiar el tamaño
Arrastra para cambiar el tamaño
El propósito es estudiar cómo se realiza la acción de arrastrar y soltar para asignar espacio contenedor en la página web. Aquí tengo tres soluciones. Por supuesto, todas están relacionadas con su diseño. La forma de uso depende de la situación. Por supuesto , Me di cuenta del tipo más simple
El efecto es el siguiente
Parte de código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽变大小</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
user-select: none;
}
body,html{
width: 100%;
height: 100%;
}
#div{
width: 100%;
height: 100%;
display: flex;
}
#left,#right{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
#right{
flex: 1;
}
#left{
flex-basis: 100px;
}
#bar{
flex-basis: 5px;
border:1px solid lightgray;
cursor:e-resize;
}
</style>
</head>
<body>
<div id="div">
<div id="left">左边</div>
<div id="bar"></div>
<div id="right">右边</div>
</div>
</body>
</html>
<script>
$(function(){
var flag = flag;
$("#bar").mousedown(function(){
flag=true;
}).mouseup(function(){
flag =false;
})
$("#div").mousemove(function(e){
if(flag){
var temp =e.clientX;
$("#left").css("flex-basis",temp+"px");
}
}).mouseup(function(){
flag =false;
})
})
</script>
Ideas de realización
- En primer lugar, esto tiene mucho que ver con el diseño. Si el diseño no es científico al principio, puede ser problemático hacerlo, así que empiezo con el más simple, es decir, usé el modelo de caja flexible al principio. . Hay flex y flex-base. Puede cumplir muy bien con mis requisitos. Solo necesito monitorear la acción de arrastre y luego cambiar el ancho o alto de la flex-base. La mitad restante no necesita que calcule en absoluto , y todo está empaquetado por el propio flex.
- La segunda es que la caja es inútil, y la altura y el ancho están codificados. Si puede, debe agregar un bloque de arrastre en el medio y calcular el ancho y la altura de acuerdo con el primer método anterior, pero esto Depende de usted Calcular ambos lados juntos, de lo contrario habrá un error en el diseño.
- El tercer tipo es problemático. Si no desea agregar un bloque en el medio para pedirle al usuario que arrastre, pero solo dé un borde delgado, eso es casi alcanzable, y si el diseño grande está bien, debería funcionar. Para hacer esto, monitorea el bloque arrastrable, monitorea si el mouse está cerca de un rango del marco cuando el mouse se mueve hacia adentro, y si es así, marca la clase anterior, y luego repite el proceso de dos uno para hacerlo
- Sueño terminado, roto