How to move a div with the JQUERY mouse?

Navigation
1

Good morning, I wanted some plugin for me to move resize the div and tals, this all with the mouse, is it possible there? I searched and did not find any plugin, if anyone knows, please inform thanks.

    
asked by anonymous 07.01.2018 / 01:44

1 answer

1

The JQuery UI library has move and resize functions. It is necessary to first include the normal JQuery.

Move

To move a div or any other html element you need to use the draggable function on the element selector 

$(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><scriptsrc="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 use 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><scriptsrc="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 base CSS of JQuery UI to have the arrow in the lower right corner that allows to resize.

These examples came from the examples in the official JQuery UI documentation

They have some more actions like droppable or selectable that might interest you.

    
07.01.2018 / 15:52
Label placement Customers are in html