Resize and Draggable Image using Jquery

Author - Webner
13.05.2020
|
0 Comments
||

Introduction to Jquery Libraries

Using jquery libraries, we can implement Resize and draggable functionality on an image. It is really a fantastic thing and we do not need to bother about knowing the inner functionality of how it is working. We just need to add jquery UI and jquery js Libraries.

Add jquery UI and jquery Js Libraries.

<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Let us see code:-

Make Div resizable and draggable by using an Id. Here Div id is mentioned as resizable.

In jquery, we use div id and call the resizable function to use this functionality. Here, we get the div height and width and mention to the Image tag. With image div id, we also use the draggable functionality.

Output: Before Resize Image

resize 1

Using Resize Image

resize 2

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *