jQuery resize() 事件在可拖动时不起作用

jQuery resize() event is not working while draggable

我正在尝试使用 jQuery 将 "Draggable" 放入 DIV(id=sortable),但它不起作用 "Resize"。

  1. 可拖动 "Drag me down" DIV 到 DIV(id=sortable)
  2. Draggable 在 DIV(id=sortable)
  3. 中工作正常
  1. Resizable is not working within the DIV(id=sortable)

有谁知道我做错了什么吗?

脚本HTML

$(function() {
  $("#sortable").sortable({
    revert: true
  });
  $("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
  });

  $('.resizemove').resizable();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="draggable" class="ui-state-highlight ui-state-default resizemove DivStyle" style="width:100px; height:100px; display:block; background: lightyellow;">Drag me down</div><br>
</div>

<div id="sortable" class="main-wrap" style="border:5px solid rgb(221, 221, 221);padding: 5px; clear: both;">
  <div class="ui-state-default resizemove DivStyle" style="width:100px; height:100px; display:block; background: lightbluered;">One</div>
  <div class="ui-state-default resizemove DivStyle" style="width:100px; height:100px; display:block; background: lightpink;">Two</div>
  <div class="ui-state-default resizemove DivStyle" style="width:100px; height:100px; display:block; background: lightgray;">Three</div>
  <div class="ui-state-default resizemove DivStyle" style="width:100px; height:100px; display:block; background: lightseagreen;">Four</div>
  <div style="clear:both"></div>
</div>

这是JsFiddle

我会调整你的可拖动手柄。例如:

  $("#draggable").draggable({
    connectToSortable: "#sortable",
    handle: $(this).not(".ui-resizable-handle"),
    helper: "clone",
    revert: "invalid"
  });

示例:https://jsfiddle.net/Twisty/84cvchas/2/