Draggable & Resizable on image

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 id="grid">
<div id="divImageId">
<img id="imageId" class="draggable-picture dropped"...

CSS

#grid{
  width:1000px;
  height:1000px;
  border: 1px solid black;
  
}

JavaScript

$("#divImageId").css({ position: 'absolute' }).draggable({
                            cursor: "move",
                            containment: "#grid",
                            helper: "original",
                            snap: ".dropped," + "#" + $(this).attr("id"),
                            snapTolerance: 5,
                            start: function (event, ui) {
                                $(this).removeClass("dropped").addClass("dragged");
                            },
                            stop: function (event, ui) {
                                $(this).removeClass("dragged").addClass("dropped");
                                JsCommonFunction.saveTemplateToDisk();
                            }
                        });
                        

$("#imageId").resizable({
    containment: "#grid",
    aspectRatio: true,
    handles: "e, w"
});