How can i make element both draggable and resizable in jquery?
Add a comment
|
4 Answers
both draggable and resizable supports chaining mode so you can simplify your code in one line.
Let say you have a div and id of that div is header which you want to make draggable and resizable.then jquery will work like this....
$(document).ready(function() {
$("#header").draggable().resizable();
});
see demo here...DEMO
refer this tutorial for more information ....Draggable and resizable
2 Comments
Vivek
add this jQuery UI...in your file.. ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js under script tag.
Ankur
do we have any alternate library
Besides using jQuery you also have to use jQuery UI http://jqueryui.com/demos/.
jQuery UI will provide all of the functionality for what you would need. More specifically you want the Draggable and Resizable plugins (perhaps the Droppable too depending of what you are trying to do).
Then you will need to do the following to make it Draggable and Resizable:
$(document).ready(function() {
$(".elements").draggable().resizable();
});
Comments
this is the original source
// this will make <div id="box"> resizable and draggable
$('#box').resizable().parent().draggable();
// same but slightly safer since it checks parent's class
$('#box').resizable().parent('.ui-wrapper').draggable();
Comments
This two functions are draggable + resizable !
$(function() {
$("#resizable").resizable({
containment: "parent"
});
$("#resizable").draggable({
containment: "parent"
});
});
