javascript - 使用可拖动的 jQuery UI 重新计算拖动元素的宽度

Question

<div>如果将 a 拖出其父元素，我需要动态更改它的宽度，以便它的右边缘保持“粘合”到父元素的右边缘，并且<div>在新宽度内包裹的内容。经过几天的谷歌搜索和阅读帖子后，我已经设法<div>在它触及父母时调整了一次。我尝试 mouseup/mousedown 重新启动它，但它不起作用。

最终结果应该双向起作用（当拖回父级时返回其原始大小），例如在<div>浮动到右侧时从左边缘调整大小。但就目前而言，我至少希望它在将其“拖出”父级时动态调整大小。

我确定我在某处看到过这种情况，我拒绝相信这是不可能的。

let item = $( '#item' );
let draggableRight;
let parentWidth = $('#parent').outerWidth();

function resizeMe() {
  draggableRight = item.position().left + item.width();
  if (draggableRight > parentWidth) {
    item.width(item.width() - 50);
  }
}

item.draggable({
  scroll: false,
  containment: 'parent',
  drag: function (event, ui) {
    resizeMe();
  }
});

#parent {
  height: 100vh;
}

#item {
  position: absolute;
  cursor: move;
}

<div id="parent">
  <div id="item">
    <span>Some random text</span>
    <p>I want this to continue wrapping/shrinking as I'm dragging to the right.</p>
  </div>
</div>



<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

标签： javascriptjqueryjquery-ui-draggable