Open In App

jQuery UI Dialog Drag Event

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery UI Drag event is triggered when the dialog box is dragged.

Learn more about jQuery selectors and events here.

Syntax:

$(".selector").dialog (
   drag: function( event, ui ) {
       console.log('dragged')
   },

Approach:

  • First, add jQuery Mobile scripts needed for your project.
<link href = 
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
    rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js">
    </script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js">
    </script>
  • ‘Open Dialog’ button will trigger the click function (#gfg) that will further open the <textarea> in a dialog (#gfg2).
  • drag( event, ui ) : Triggers when mouse is moved. There is callback function attached to this drag which gets triggered whenever mouse is moved. 
    • event :  Type -> Event
    • ui : Type -> Object
    • callback function : function( event, ui ) { console.log(‘dragged’)}

Example 1:

HTML




<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <link href
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
         </script>
         </script>
        
  
      <script type = "text/javascript">
         $(function() {
            $( "#gfg2" ).dialog({
          autoOpen: false, 
               drag: function( event, ui ) {
                  console.log('dragged')
               },
            });
            $( "#gfg" ).click(function() {
               $( "#gfg2" ).dialog( "open" );
            });
         });
      </script>
   </head>
     
   <body>
      <div id = "gfg2" title="GeeksforGeeks">
         <textarea>jQuery UI | drag(event, ui) Event</textarea>
      </div>
      <button id = "gfg">Open Dialog</button>
   </body>
</html>


Output:



Last Updated : 09 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads