How to move a div with the JQUERY mouse?

Asked

Viewed 1,722 times

1

Good morning , I wanted some plugin for me to move resize the div and tals, all this with the mouse, is it possible to exist? i searched and found no plugin , if anyone knows, please inform thank you.

jquery

  • Related: https://answall.com/q/266755/8063

1 answer

1

The Jquery UI library has functions to move and resize. For it it is necessary to first include the normal Jquery.

Move

To move a div or any other html element needs to use the function draggable about the selector of this element

$(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>

Resize

To resize the function to be used is 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>

In this last example it was necessary to include the Jquery UI base CSS to have the arrow in the bottom right corner that allows resizing.

These examples came from the examples in official Jquery UI documentation

They have even more actions such as droppable or selectable who might interest you.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.