[jquery resizable]子要素を操作して親要素を広げたい

前提・実現したいこと

jQuery UI で提供されているresizableについてです。

<div id="item" class="item"> <i class="right-bottom material-icons">stars</i> <div class="text_com"><p>テキスト</p></div> </div>

子要素（right-bottom）にresizableを当て、子要素が操作された時、子要素の大きさはそのままで
親要素（item)の枠が広がる様にする為の方法はりますか？

該当のソースコード

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<style>
.box{
  width:300px;
  height:300px;
  border:solid;
  margin-top:20px;
}
.item {
  border:solid 2px;
  width:100px;
  height:50px;
  display:inline;
  position:absolute;
  user-select:none;
  -ms-user-select:none;
  -webkit-user-select: none;
}
.text_com{
  display:flex; 
  width:100%; 
  height:100%; 
  align-items:center;
}
.left-top{
  position:absolute;
  top:-17px;
  left:-17px;
  width:15px;
  height:15px;
}
.right-bottom{
  position:absolute;
  bottom:-12px;
  right:-12px;
  width:15px;
  height:15px;
}
</style>

<script>
$(function() {
  $('.item').draggable({
    containment: 'parent',
    scroll: false,
  });

  $('.right-bottom').resizable({
  });
});
</script>

</head>
<body>
<table>
  <tr>
    <td>
      <div id="box" class="box">
        <div id="item" class="item">
          <i class="left-top material-icons">stars</i>
          <i class="right-bottom material-icons">stars</i>
          <div class="text_com"><p>テキスト</p></div>
        </div>
      </div>
    </td>
  </tr>
</table>
</body>
</html>

試したこと

resizableに用意されているオプション（alsoResizeなど）、メソッド、イベントは全て試しました。

m.ts10806

2019/06/15 07:51

「子要素が操作された時」は「ドラッグで移動されたとき」ということでよろしいでしょうか。「親要素の枠を広げる」というのはどういう仕様で考えられていますか。例えば、「子要素は親要素の範囲でしか動かない」というルールで、動いた方向に広がって「親要素の中に居続けさせるようにする」とか。とりあえず適当に大きくするだけならそこまで難しそうではないですが、とりあえず大きくするものだけのヒントで良いのでしょうか。

m.ts10806

2019/06/15 07:52

あいやresizableだからドラッグ操作で大きくするとかそういうことか

nkd

2019/06/15 08:13

ご質問ありがとうございます。仰る通りで、親要素にresizableを付与するとドラッグ操作でそのまま大きくできます。この度はcssで付与した子要素（icon）をドラッグして、親要素を広げたいです。

m.ts10806

2019/06/15 08:15

>子要素（icon）をドラッグして 1個キーワード出ましたね。ちゃんと試してないですがたぶんこれです。 resizableは指定した要素自体の大きさを変えるので「リサイズのキーにしたい要素」はあくまで「ドラッグという操作」のみだと思います。

m.ts10806

2019/06/15 08:17

というか星アイコンの表示位置をもう少し内側にすればそれっぽく見えなくもない気がしますが、それじゃダメですよね？

nkd

2019/06/15 08:33

ご返信ありがとうございます。 > resizableは指定した要素自体の大きさを変える仰る通りだと思います。その上で、子要素のアイコンをドラッグ操作すると親要素がresizeされる方法がresizableで実現可能かどうか、可能であればその方法が知りたかったです。アイコンの位置をズラしても、親要素の枠の端に反応しない領域ができてしまう為、残念ですがそれではダメです。