Question

如果将<div>从其父元素中拖出，我需要动态地更改其宽度，以使其右边缘保持“粘合”到父元素的右边缘，并<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>

使用jQuery UI Draggable重新计算拖动元素的宽度

0 个答案: