why is resizable when applied simultaneously with draggable on topleft and bottomleft giving me an unwanted behaviour

user_8087745 0
Viewed 44

I want to apply resizable simultaneously with draggable for a div and it should be contained within its parent div but on dragging towards the left or top corner and resizing it from north-west,west,south-west handles makes the div widthless..

  <!DOCTYPE html>
     <html>    
         <head>
               <title>Resizable</title>

             <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">

       <style type = "text/css">      

              #primary
             {
               width : 30rem;
               height : 30rem;
              background-color:green;
              margin: auto;  
            }
             #draggable{
                width: 15rem;
                height: 15rem;
                 background-color: yellow;



                  }
             .ui-widget-content{
                  background: yellow;
              }


        </style>
      </head>
      <body>


           <div id = "primary">

           <div id= "draggable" class="ui-widget-content">
           </div>             
           </div>




        <script >
             w= parseInt($('#draggable').css('width'),10);
             h= parseInt($('#draggable').css('height'),10);
             $( function() {
                    $( "#draggable" ).resizable( {handles: 'ne , nw ,se, 
       sw , n ,e ,s,w', minWidth : w, minHeight : h ,containment:"parent" 
       }).draggable({containment: "parent"});
        } );

     </script>
   </body>
  </html>
css jquery javascript
1 Answers

The trick is to set the primary div position: relative and the draggable div position: absolute

$(document).ready(function(){
 let w = parseInt($('#draggable').width());
 let h = parseInt($('#draggable').height());
  
  $( function() {
    $( "#draggable" ).resizable( 
    {
      handles: 'n, e, s, w, ne, se, sw, nw', 
      minWidth : w, 
      minHeight : h,
      containment:"#primary" 
    }).draggable(
    {
     containment: "#primary",
     });
});

});
#primary
{
  width: 30rem;
  height: 30rem;
  background-color: green;
  margin: auto;
  position: relative !important;
}

#draggable{
  width: 15rem;
  height: 15rem;
  background-color: yellow;
  position: absolute !important;
}

.ui-widget-content{
  background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id = "primary">

      <div id= "draggable" class="ui-widget-content">
      </div>             
    </div>

user_71951550
Related