Frage Wie mit jQuery/JS die Breiten-, Höhen- & Positions-Angaben einen DIVs aktualisieren, wenn sich diese ändern?

[xSTVNx]

Ich habe ein DIV-Element (#d) innerhalb eines anderen DIV-Elementes (#pa), dass ich mit Hilfe von jQuery bzw. jQuery UI sowohl draggable() als auch resizable() gemacht habe. Außerdem lasse ich von #d die Breite, Höhe und Position (bzw. die Abstände von #d zu allen Innenseiten von #pa) ausgeben. Das klappt soweit alles wunderbar...

Allerdings möchte ich, dass die Breiten-, Höhen-, Positions-Angaben automatisch aktualisiert werden, wenn #d verschoben bzw. vergrößert/verkleinert wird. Jedoch komme ich nicht so recht drauf, die ich das bewerkstelligen kann – und alles Googlen bzgl. (auto)refresh, (auto)reload, (auto)update und Ähnlichem war leider nicht erfolgreich.

eingebundene Dateien:

• jquery-3.4.1.min.js
• jquery-ui.1.12.1.min.js

der relevante Code:

<div id="pa">
    <div id="d">
        <img src="image.png" />
    </div>
</div>

<ul class="data">
    <li class="width">
        width: <span>???</span> px
    </li><li class="height">
        height: <span>???</span> px
    </li><li class="top">
        top: <span>???</span> px
    </li><li class="left">
        left: <span>???</span> px
    </li><li class="right">
        right: <span>???</span> px
    </li><li class="bottom">
        bottom: <span>???</span> px
    </li>
</ul>

/* draggable()  */

$( function() { $( "#d" ).draggable({ snap: "#pa", snapMode: "inner" }); } );

/* resizable() */

$( function() { $( "#d" ).resizable(); } );

/* my data */

$( function() {
   
    var pa = $("#pa");
    var paH = pa.height();
    var paW = pa.width();
   
    var d = $("#d");
    var dH = d.height();
    var dW = d.width();
    var dPos = d.position();
    var dPosT = dPos.top;
    var dPosL = dPos.left;
    var dPosR = paW - dW - dPosL;  
    var dPosB = paH - dH - dPosT;
   
    $( ".data .height span" ).html(dH);
    $( ".data .width span" ).html(dW);
   
    $( ".data .top span" ).html(dPosT);
    $( ".data .left span" ).html(dPosL);
    $( ".data .right span" ).html(dPosR);
    $( ".data .bottom span" ).html(dPosB);
} );

Danke und LG

 

[xSTVNx]

Da müssten dir die Events drag und resize weiter helfen:

Draggable Widget | jQuery UI API Documentation

api.jqueryui.com

Resizable Widget | jQuery UI API Documentation

api.jqueryui.com

Ja, vielen Dank! Genau so etwas habe ich gesucht.