CODEWITHSUNDEEP
jqueryjquery-ui
Harshil Patel
Harshil Patel

Reputation: 65

Jquery Draggable and Resizable on Same element

i have a <div class="outerDiv"></div> and i am dynamically adding another div over it which i want to make draggable as well as resizable within this outerDiv

.isStore is css class of the div which i want to make draggable and Resizable.

$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" });

thje problem is i am not able to resize the div to full width of OuterDiv

In above snap The div with grid is outerDiv and red colour shows the div which is draggable and resizable but this is the maximum size i can resize. i want it to resize all over the outerDiv.

the css i am using is

.outerDiv
 {
   width: 202px;
   overflow:auto;
   overflow: auto;
   display:inline-block;
 }

.isStore
 {
   height: 10px;
   width: 10px;
   background-color: #fff7f8;
   border: 1px SOLID;
   float: left;
   position:absolute;
 }

is there something i am missing?

Upvotes: 2

Views: 2448

Answers (1)

nothingisnecessary
nothingisnecessary

Reputation: 6253

You may want to use your browser's developer tools to find out whether there are some constraints defined (like CSS max-height / max-width maybe?). If you have Chrome, you can right click the element and view the Styles/Computed tab to see what it may be picking up. When solving problems like this it helps to simplify the example and gradually add complexity.

This works OK with this simple example (with no CSS max constraints):

$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" });
.isStore
{
  width: 20px;
  height: 20px;
  background-color: red;
  }
.outerDiv
{
  width: 160px;
  height: 160px;
  background-color: #ccc;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class='outerDiv'><div class='isStore'></div></div>

This simulates your problem by adding CSS max-height and max-width constraints.

$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" });
.isStore
{
  width: 20px;
  height: 20px;
  background-color: red;
  max-height: 100px;
  max-width: 100px;
  }
.outerDiv
{
  width: 160px;
  height: 160px;
  background-color: #ccc;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class='outerDiv'><div class='isStore'></div></div>

You can try setting these styles to auto like this:

.isStore
{
  width: 20px;
  height: 20px;
  background-color: red;
  max-height: auto;
  max-width: auto;
}

Upvotes: 2

Related Questions