Um plug-in jquery todos os dias - arraste e solte para alterar o tamanho
Arraste para alterar o tamanho
O objetivo é estudar como se realiza a ação de arrastar e soltar de alocação de espaço de container na página da Web. Tenho três soluções aqui. Claro, todas estão relacionadas ao seu layout. Como usar depende da situação. Claro , Percebi que o tipo mais simples
O efeito é o seguinte
Parte do 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>
Ideias de realização
- Em primeiro lugar, isso tem muito a ver com o layout. Se o layout não for científico no início, pode ser problemático fazê-lo, então começo pelo mais simples, ou seja, usei o modelo flex box no início . Existem flex e flex-basis. Pode atender muito bem aos meus requisitos. Eu só preciso monitorar a ação de arrasto e, em seguida, alterar a largura ou altura da flex-basis. A metade restante não precisa de nenhum cálculo , e é tudo embalado pelo próprio flex.
- A segunda é que a caixa é inútil e a altura e a largura são codificadas. Se você puder, adicione um bloco de arrasto no meio e calcule a largura e a altura de acordo com o primeiro método acima, mas isso depende de você Calcular os dois lados juntos, caso contrário, haverá um bug no layout.
- O terceiro tipo é problemático. Se você não quiser adicionar um bloco no meio para solicitar que o usuário arraste, mas apenas fornecer uma borda fina, que é quase alcançável, e se o layout grande estiver bom, deve funcionar. Para fazer isso, monitore o bloco arrastável, monitore se o mouse está próximo a um intervalo do quadro quando o mouse se move para dentro e, se sim, marque a classe anterior e repita o processo de dois um para fazê-lo
- Terminado, sono interrompido