Make a Div Draggable and Resizable using jQueryUI

Posted by Nishant_Mittal under jQuery category on | Points: 40 | Views : 2695
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DraggableAndResizable.aspx.cs"
Inherits="JQueryValidationExample.DraggableAndResizable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
<title>jQuery Draggabele And Resizable</title>

<link href="themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
margin:0 auto;
width: 190px;
height: 190px;
padding: 0.5em;
<script type="text/javascript">
$(function () {
<script type="text/javascript">
$(function () {
<form id="form1" runat="server">
<div id="draggableResizable" class="ui-widget-content">
Drag me or Resize me</p>

In above code use jquery-ui-1.9.1.custom for jquery-ui.css and jquery-ui.js (see in head tag), this can be downloaded from

Comments or Responses

Posted by: Rimi1289 on: 8/10/2013 Level:Starter | Status: [Member] | Points: 10
Cool. You will also love this.

Also, dynamically create "draggable" elements using JQuery.

Login to post response