Draggable + Resizable jQuery-UI

by Yusril Maulidan Raji

HTML

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css">
<div style="display: table; border-collapse: collapse;width: 100%">
<div id="content-signature" style="display: table-row; border:1px solid black;width:500px;height:500px">
  <div id="signature" style="border:1px solid black;width:50px;height:50px;display: inline-block; position:absolute">
  </div>
</div>
</div>

JavaScript

$("#content-signature").resizable({
    handles: "s",
    minHeight: 74.25,
    maxHeight: 378,
    stop: function (event, ui) {
    }
});
            
$("#signature").draggable({
            cursor: "move",
            containment: "#content-signature",
            helper: "original",
            snap: ".dropped,#content-signature",
            start: function (event, ui) {
                $(this).removeClass("dropped").addClass("dragged");
            },
            stop: function (event, ui) {
                $(this).removeClass("dragged").addClass("dropped");
            }
        }).resizable({
            containment: '#content-signature',
            aspectRatio: true,
            handles: "e, w",
            stop: function (event, ui) {
            }
        });