Build jQuery UI Draggable - Delay start in JavaScript

Description

The following code shows how to build jQuery UI Draggable - Delay start.

Example


<!-- Revised from demo code on http://jqueryui.com/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Delay start</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<!--   w  w w  .ja v  a 2s .  com-->
<style>
#draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ distance: 20 });
$( "#draggable2" ).draggable({ delay: 1000 });
$( ".ui-draggable" ).disableSelection();
});
</script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
<p>Only if you drag me by 20 pixels, the dragging will start</p>
</div>

<div id="draggable2" class="ui-widget-content">
<p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
</div>

<div class="demo-description">
<p>Delay the start of dragging for a number of milliseconds with the <code>delay</code> option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option. </p>
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Build jQuery UI Draggable - Delay start in JavaScript

Home »
  Javascript Tutorial »
    jQuery UI »
      Draggable

Javascript Tutorial Draggable
Add border to the draggable in JavaScript
Add dragging stopped event handler in JavaS...
Build jQuery UI Draggable - Auto-scroll in ...
Build jQuery UI Draggable - Constrain movem...
Build jQuery UI Draggable - Cursor style in...
Build jQuery UI Draggable - Default functio...

Build jQuery UI Draggable - Delay start in ...

Build jQuery UI Draggable - Events in JavaS...
Build jQuery UI Draggable - Handles in Java...
Build jQuery UI Draggable - Revert position...
Build jQuery UI Draggable - Snap to element...
Build jQuery UI Draggable + Sortable in Jav...
Build jQuery UI Draggable - Visual feedback...
Build jQuery UI Position - Default function...
Build jQuery UI Position - Image Cycler in ...
Change cursor for draggable tag in JavaScri...
Handle drag and drop events: activate, deac...
Handle drag start and stop events in JavaSc...
Handle droppable accepted event in JavaScri...
Set Drag delay distance in JavaScript
Set cursor position for the draggable in Ja...
Set to Drag along a grid in JavaScript
Set to fly back in JavaScript
Set to only draggable along with axis y in ...
Set to only draggable inside parent in Java...
Snap to another for draggable in JavaScript