在图像上应用自定义Jquery UI调整大小句柄

Question

我有以下代码在图像上启用自定义调整大小句柄。我在div元素上尝试了代码，该代码运行正常。但是在img元素上，它无效。

并会出现以下错误。

uncaught TypeError: Cannot read property 'ownerDocument' of undefined jquery ui resize

我的理解是自定义句柄应该是要调整大小的元素的子元素。有没有办法在图像上添加自定义句柄并调整大小？

＆＃13;

＆＃13;

$( document ).ready(function() {
    $('#img-wrapper img').resizable({
    handles: {
        'nw': '#nwgrip',
        'ne': '#negrip',
        'sw': '#swgrip',
        'se': '#segrip',
        'n': '#ngrip',
        'e': '#egrip',
        's': '#sgrip',
        'w': '#wgrip'
    }
});
});

＆＃13;

#img-wrapper{
position:relative;
  width:350px;
  height:150px;
  }

#nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
  position:absolute;
}
#nwgrip {
    left: -5px;
    top: -5px;
}
#negrip{
     top: -5px;
     right: -5px;
}
#swgrip{
    bottom: -5px;
    left: -5px;
}
#segrip{
     bottom: -5px;
    right:-5px;
}
#ngrip{
     top: -5px;
    left:50%;
}
#sgrip{
     bottom: -5px;
    left: 50%;
}
#wgrip{
     left:-5px;
     top:50%;
}
#egrip{
     right:-5px;
     top:50%;
}
}

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<div id="img-wrapper">
  <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要使用alsoResize。

如果您需要保留纵横比，请添加aspectRatio: true。

因此，请改变：

<item android:title="Neuigkeiten">
  <menu >
      <group android:checkableBehavior="single">
          <item
            android:id="@+id/nav_information"
            android:icon="@drawable/ic_info_black"
            android:title="@string/title_activity_aktuelles" />

     </group>
 </menu>

为：

$('#img-wrapper img').resizable({

我的片段：

$('#img-wrapper').resizable({

$(function () {
  $('#img-wrapper').resizable({
    handles: {
      'nw': '#nwgrip',
      'ne': '#negrip',
      'sw': '#swgrip',
      'se': '#segrip',
      'n': '#ngrip',
      'e': '#egrip',
      's': '#sgrip',
      'w': '#wgrip'
    },
    alsoResize: $(this).find('img')
  });
});

#img-wrapper{
  position:relative;
  width:350px;
  height:150px;
  }

#nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
  position:absolute;
}
#nwgrip {
    left: -5px;
    top: -5px;
}
#negrip{
     top: -5px;
     right: -5px;
}
#swgrip{
    bottom: -5px;
    left: -5px;
}
#segrip{
     bottom: -5px;
    right:-5px;
}
#ngrip{
     top: -5px;
    left:50%;
}
#sgrip{
     bottom: -5px;
    left: 50%;
}
#wgrip{
     left:-5px;
     top:50%;
}
#egrip{
     right:-5px;
     top:50%;
}