Issue with draggable and resizable for same element

Question

I've been doing some research about draggable & resizable plugins from jQuery but encountered an issue recently. I've tried to replicate this situation on the following fiddle:

$('.event').draggable({
grid: [120, 12],
cursor: 'move',
containment: '#container',
start: function (event, ui) {
    console.log("event dragging started");
}
}).resizable({
containment: 'parent',
grid: 12,
handles: {
    'n': '#ngrip',
        's': '#egrip'
},
start: function (e, ui) {
    console.log('resizing started');
},

});

Here's a fiddle .

The resizable south handle doesn't work at all, also the strange thing happens to the north handle -> it decreases size of my div an pushes it rapidly to the right. What am I doing wrong?

Answer 1

Your code:

$('.event').draggable({
    grid: [120, 12],
    cursor: 'move',
    containment: '#container',
    start: function (event, ui) {
        console.log("event dragging started");
    }
}).resizable({
    containment: 'parent',
    grid: 12,
    handles: {
        'n': '#ngrip',
            's': '#egrip'
    },
    start: function (e, ui) {
        console.log('resizing started');
    },

});

Code Needed

$('.event').draggable({
    grid: [120, 12],
    cursor: 'move',
    containment: '#container'
}).resizable({
    containment: 'parent',
    grid: [ 120, 12 ],
    handles: "n, e, s, w"

});

1) remove trailing comma in the end 2) make handles as handles: "n, e, s, w" but there is still some bug after this you can only resize after you have dragged from once and resizing work precisely from a pixel maybe because you are using custom resize handlers, I am not sure. Read the documentation for more help.

New Code

$('.event').draggable({
    cursor: 'move',
    containment: '#container'
}).resizable({
    containment: '#container',
    handles:"n, e, s, w",
    start: function (e, ui) {
        console.log('resizing started');
    }
});

Answer 2

Try this code. Jquery

    $(document).ready(function (){
       $('.blue').resizable();
       $(".blue").draggable();
    });

Html

    <div id="container">
       <div class="column">
          <div class="event blue">
           </div>
       </div>
        <div class="column">
          <div class="event dark-blue blue"  id="event" style="margin-top:3px">
          </div>
        </div>
     </div>

Attach jquery files

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

Answer 3

Try this code i think this will helpful you

Html:

<div id="container">
 <div class="column">
    <div class="event blue">
        <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
        <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    </div>
    <div class="column">
    <div class="event dark-blue"  id="event" style="margin-top:3px">
        <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
        <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    </div>
</div>
 </div>
</div> 

jquery:

    $(document).ready(function (){
     $('.blue').resizable({
           handles: {
               's': '#sgrip',
                'w': '#wgrip'
            }
         });
        $('.dark-blue').resizable({
        handles: {
           's': '#sgrip',
            'w': '#wgrip'
          }

      });
    $(".column").draggable();
   });

Answer 4

Fix it . Please review it .

$('.event').draggable({
    grid: [120, 12],
    cursor: 'move',
    containment: '#container',
    start: function (event, ui) {
        console.log("event dragging started");
    }
}).resizable({
    containment: '#container',
    grid: 12,
    handles: {
        'n': '#ngrip',
            's': '#sgrip'
    },
    start: function (e, ui) {
        console.log('resizing started');
    },

});

change the resizable containment from parent to #container , and south handle name from #egrip to #sgrip . nothing else.

check fiddle here .