Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Interaction in jQuery with Drag-able

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 147
    Comment on it

    The Drag-able function can be used in JqueryUI to enable draggable functionality on a DOM element. Using Drag-able function we can drag the element by clicking on it with the mouse.

    Example code:

    <html>
    
       <head>
          <title>The jQuery Dragable Example</title>
          <script type = "text/javascript"
             src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        
          <script type = "text/javascript"
             src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
        
          <script type = "text/javascript" language = "javascript">
       
             $(function() {
                $( "#draggable_element" ).draggable();
             });
         
          </script>
        
          <style>
             #draggable_element { width: 150px; height: 150px; }
             .back{
                background-color: yellow;
                width: 50px;
                padding: 25px;
             }
          </style>
       </head>
     
       <body>
    
          <div id = "draggable_element" class = "ui-widget-content">
             <p class = "back">Drag me</p>
          </div>
       
       </body>
     
    </html>

    When you run this file in your browser you will see an element in yellow color with text Drag me, by clicking on this object with a mouse we can drag it anywhere within the viewport.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: