Drag an Object using jQuery

by

Question:

Emily, a student of AI academy has a project to design a webpage to arrange suitable items as a grid. 
Before beginning the project she wants to know how to drag an object when the user clicks on it. Create a webpage and implement the dragable feature to drag an object wherever the user wants.

Apply the following constraints:

  • <div> tag with id as draggable
  • <img> tag with the image provided, assume the image is in the same directory with the name “fish.jpg”
  • <p> tag with the text “Drag me around”

Use the following JQuery Libraries:

  1. https://code.jquery.com/jquery-1.10.2.js
  2. https://code.jquery.com/ui/1.10.2/jquery-ui.js
Drag an Object

CODE:–

jqcheckbox.html

<html>
    <head>
        <meta charset="utf-8">
        <script src="https://code.jquery.com/jquery-1.10.2.js">
        </script>
        <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <style>
            #draggable
            {
                width:300px;
                height: 300px;
            }
        </style>
        <script>
        $(document).ready(function(){
        $("p").click(function(){
        $("#draggable").draggable();
        });
        });
        </script>
    </head>
    <body>
        <div id="draggable" class="ui-qidget-content">
            <img src="https://quizforexam.com/wp-content/uploads/2020/10/fish.jpg">
            <p>Drag me around</p>
        </div>
    </body>
</html>

Leave a Comment