jQuery-ui 可调整大小：拖动元素时调整大小的问题

Question

当我拖动一个div并调整它的大小时，该div会返回到它原来的 position ......你能帮我解决这个问题或纠正我的代码中的错误吗？

在此先感谢，这是我的代码：

 $(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

更改$job的accept选项，这样td#testblocks可以接受可拖动的 div。

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