Open In App

jQuery UI Dialog Drag Event

Last Updated : 09 Dec, 2021
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:



Previous Article
Next Article

Similar Reads

jQuery UI Draggable drag Event
jQuery UI is a web-based technology and consists of various GUI widgets, visual effects, and themes. These features can be implemented using the jQuery JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to add widgets easily. In
2 min read
Onsen UI Dialog CSS Component Material Alert Dialog
Onsen UI is an HTML5 framework that allows you to design distinctive and usable user interfaces for free (UI). It also makes UI creation easier, enabling programmers to focus on the core of the product. Onsen UI is a complex set of user interface components designed specifically for mobile apps, with ready-to-use features that follow native iOS and
4 min read
Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons 2
Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Alert Dialog is used to display some warning messages with pop-ups on the webpage. Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons 2 is used to create the
2 min read
Onsen UI Dialog CSS Component Basic Alert Dialog
Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Alert Dialog is used to display some warning messages with pop-ups on the webpage. Onsen UI Dialog CSS Component Basic Alert Dialog is used to create the basic alert dialo
2 min read
Onsen UI Dialog CSS Component Alert Dialog without Title
Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Alert Dialog is used to display some warning messages with pop-ups on the webpage. Onsen UI Dialog CSS Component Alert Dialog without Title is used to create the alert dia
2 min read
Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons
Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Alert Dialog is used to display some warning messages with pop-ups on the webpage. Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons is used to create the a
2 min read
jQuery UI Dialog create Event
jQuery UI Create event is triggered when the dialog box is created. Learn more about jQuery selectors and events here. Syntax: $(".selector").dialog ( create: function( event, ui ) { console.log('created') },Approach: First, add jQuery Mobile scripts needed for your project.&lt;link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jque
2 min read
jQuery UI Dialog close Event
jQuery UI Close event is triggered when the dialog box is closed. Learn more about jQuery selectors and events here. Syntax: $(".selector").dialog ( close: function( event, ui ) { console.log('closed') },Approach: First, add jQuery Mobile scripts needed for your project.&lt;link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-u
1 min read
jQuery UI dialog resizeStop() Event
jQuery UI resizeStop event is triggered when the dialog box is stopped after we resized. Syntax: $(".selector").dialog ( resizeStop: function( event, ui ) { console.log('resized') },Approach: First, add jQuery UI scripts needed for your project. &lt;link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"
1 min read
jQuery UI Dialog resizeStart Event
jQuery UI resizeStart event is triggered when the dialog box is being started to get resized. Syntax: $(".selector").dialog ( resizeStart: function( event, ui ) { console.log('resized') },Approach: First, add jQuery UI scripts needed for your project. &lt;link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "style
1 min read