Bom dia , eu queria algum plugin para eu mover redimensionar a div e tals, isso tudo com o mouse, é possível existe? eu procurei e nao achei nenhum plugin , se alguem conhecer, por favor informar obrigada.
1 Resposta
A biblioteca JQuery UI tem funções mover e redimensionar. Para ela é necessário primeiro incluir o JQuery normal.
Mover
Para mover um div
ou qualquer outro elemento html precisa de utilizar a função draggable
sobre o seletor desse elemento
$(function() {
$("#meudiv").draggable();
});
#meudiv {
background-color:lightGreen;
width:150px;
height:150px;
padding:10px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="meudiv" class="ui-widget-content">
<p>Clique e arraste para mover</p>
</div>
Redimensionar
Para redimensionar a função a utilizar é resizable
.
$(function() {
$("#meudiv").resizable();
});
#meudiv {
background-color:lightGreen;
width:150px;
height:150px;
padding:10px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="meudiv" class="ui-widget-content">
<p>Redimensione este div</p>
</div>
Neste ultimo exemplo foi necessário incluir o CSS base do JQuery UI para ter a seta no canto inferior direito que permite redimensionar.
Estes exemplos partiram dos exemplos na documentação oficial do JQuery UI
Eles tem ainda mais algumas ações tal como droppable
ou selectable
que lhe podem interessar.