Anwenden angepasster JQuery UI-Größenanpassungen für das Bild

Question

Ich habe den folgenden Code, um benutzerdefinierte Größenanpassungen für ein Bild zu aktivieren. Ich versuchte den Code auf einem div Element, das gut funktioniert. Aber auf img Element funktioniert es nicht.

und wird den folgenden Fehler geben.

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

Was ich verstanden, dass die benutzerdefinierten Griffe Kinder des Elements sein sollte, die der Größe verändert werden soll. Gibt es eine Möglichkeit, benutzerdefinierte Griffe für das Bild hinzuzufügen und seine Größe zu ändern?

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

#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%; 
 
} 
 
}

<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>

Answer 1

Sie müssen alsoResize verwenden.

Wenn Sie das Seitenverhältnis beibehalten müssen, fügen Sie aspectRatio: true hinzu.

Daher Wechsel von:

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

zu:

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

Mein Schnipsel:

$(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%; 
 
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></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>