1

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

1 Resposta 1

1

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .