jQuery-ui resizable: problem with resize when element is dragged

Question

When I drag a div and resize it, the div returns to its original position... Can you help me to solve this problem or correct me about something wrong in my code?

Thanks in advance, here is my code:

 $(function() { // There's the gallery and the trash var $job = $("#testblocks"), $ressource = $(".ressource"); // Let the gallery items be draggable $("div", $job).draggable({ revert: "invalid", containment: ".containment-wrapper", //helper: "clone", cursor: "move", grid: [91, 91], refreshPositions: true, drag: function() { var offset = $(this).offset(); var xPos = offset.left; var yPos = offset.top; $('#posX').text('x: ' + xPos.toFixed(2)); $('#posY').text('y: ' + yPos.toFixed(2)); } }); $(".drag").resizable({ handles: 'e, w', grid: 91, containment: ".containment-wrapper" }); $ressource.droppable({ accept: "#testblocks > div, .ressource div", classes: { "ui-droppable-active": "ui-state-highlight" }, over: function(event, ui) { $(ui.draggable).draggable({ grid: [91, 50] }); }, out: function(event, ui) { //alert(); $(ui.draggable).draggable("option", "grid", false); } /*, drop: function (event, ui) { $(ui.draggable).appendTo($(this)); }*/ }); $job.droppable({ accept: ".ressource div", classes: { "ui-droppable-active": "custom-state-active" }, drop: function(event, ui) { $(ui.draggable).appendTo($job); } }); });

 .drag { height: 49px; width: 88px; text-align: center; z-index: 999; padding: 0; margin: 0; } td { border: 1px solid black; height: 50px; width: 160px; padding: 0; margin: 0; } th { border: 1px solid black; height: 50px; width: 180px; padding: 0; margin: 0; } tr { border: 1px solid black; height: 50px; width: 100%; padding: 0; margin: 0; }.basr { height: 150px; padding: 0; margin: 0; }.masterContent { padding: 0; margin: 0; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <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> <table cellspacing="0" style="border:1px solid black; text-align:center;position:relative;"> <tbody style="border:1px solid black;"> <tr style="border:1px solid black;"> <th style="border:1px solid black;"></th> <th style="border:1px solid black;">12am</th> <th style="border:1px solid black;">1am</th> <th style="border:1px solid black;">2am</th> </tr> <tr> <th>Ressource 1</th> <td colspan="3" rowspan="2" class="masterContent" style="position:relative;"> <table cellspacing="0" style="width:100%;" class="containment-wrapper"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="basr"> <td colspan="6" id="testblocks"> <div class="ui-widget-content ui-corner-tr drag"> <span id="posX"></span><br/> <span id="posY"></span> </div> </td> </tr> </table> <div style="top:0;left:0;position:absolute;width:100%;height:50px;padding:0;margin:0 auto;" class="ressource"></div> </td> </tr> <tr class="basr"> <th>bac à sable</th> </tr> </tbody> </table>

Answer 1

Change your accept option for $job , this way the td#testblocks can accept the draggable div.

$job.droppable({
    accept: ".drag",
    classes: {
      "ui-droppable-active": "custom-state-active"
    },
    drop: function(event, ui) {
      $(ui.draggable).appendTo($job);
    }
});