Пересчитать ширину перетаскиваемого элемента с помощью перетаскиваемого пользовательского интерфейса jQuery - PullRequest
Новая
       11

Пересчитать ширину перетаскиваемого элемента с помощью перетаскиваемого пользовательского интерфейса jQuery

0 голосов
/ 22 октября 2018

Мне нужно динамически изменить ширину <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>
...