Open In App

jQuery UI Draggable delay Option

Last Updated : 08 Mar, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Draggable delay option is used to set the delay time to dragging the element.

Syntax:

$( ".selector" ).draggable({
    delay: time
});

CDN Link: First, add jQuery UI scripts needed for your project.

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

Example:

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src=
"//code.jquery.com/jquery-1.12.4.js">
    </script>
    <script src=
"//code.jquery.com/ui/1.12.1/jquery-ui.js">
    </script>
  
    <style>
        h1 {
            color: green;
        }
  
        #div_element {
            width: 150px;
            height: 150px;
            background: green;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h3>jQuery UI Draggable delay Option</h3>
  
    <div id="div_element">Div content</div>
  
    <script>
        $(function () {
            $("#div_element").draggable({
                delay: 500
            });
        });
    </script>
</body>
  
</html>


Output:

Draggable delay option


Reference:https://api.jqueryui.com/draggable/#option-delay



Previous Article
Next Article

Similar Reads

jQuery UI Dialog draggable Option
Dialog draggable option if set to true the dialog box will be draggable or if set to false the dialog box will not be draggable. By default, value is true. Syntax: $( ".selector" ).dialog({ draggable: true }); Approach: First, add jQuery UI scripts needed for your project. &lt;link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquer
1 min read
jQuery UI Draggable revert Option
The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Draggable revert Option is used to set the revert property of an element. If this option is set to true the helper element to be used for dragging display. Syntax: $
1 min read
jQuery UI Draggable cursorAt Option
The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Draggable cursorAt Option is used to set the offset of the dragging helper relative to the mouse cursor. The Coordinates are the combination of one or two keys: { to
1 min read
jQuery UI Draggable cursor Option
The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Draggable cursor Option is used to change the CSS cursor during the drag operation. Syntax: $( ".selector" ).draggable({ cursor: "crosshair" }); CDN Link: First, add
1 min read
jQuery UI Draggable axis Option
The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Draggable axis Option is used to dragging the element either on the horizontal (x) or vertical (y) axis. The possible values are "x" and "y". Syntax: $( ".selector"
1 min read
jQuery UI Draggable addClasses Option
The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Draggable addClasses Option is used to prevent the ui-draggable class from being added if it set to true. Syntax: $( ".selector" ).draggable({ addClasses: false });
1 min read
jQuery UI Draggable scrollSensitivity Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Draggable helper Option is used to set the distance in pixels from the edge of the viewport after which the viewport should scroll. It is a relative distance from the po
1 min read
jQuery UI Draggable scroll Option
The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Draggable scroll Option is used to scroll the container while dragging if it set to true. Syntax: $( ".selector" ).draggable({ scroll: true/false }); CDN Link: First
1 min read
jQuery UI Draggable scrollSpeed Option
The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Draggable scrollSpeed Option is used to set the speed at which the window should scroll. This option will not work if the scroll option is set to false. Syntax: $( "
1 min read
jQuery UI Draggable revertDuration Option
The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Draggable revertDuration Option is used to set the duration of reverse animation in milliseconds. Syntax: $( ".selector" ).draggable({ revertDuration: time }); CDN L
1 min read