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

Question

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

先谢谢你，这是我的代码。

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

改变你的 accept 的选择 $job，这样一来 td#testblocks 可以接受可拖动的div。

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