demos/sortable/delay-start.html

<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>jQuery UI Sortable - Delay start</title>
        <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
        <script src="../../jquery-1.9.1.js"></script>
        <script src="../../ui/jquery.ui.core.js"></script>
        <script src="../../ui/jquery.ui.widget.js"></script>
        <script src="../../ui/jquery.ui.mouse.js"></script>
        <script src="../../ui/jquery.ui.sortable.js"></script>
        <link rel="stylesheet" href="../demos.css">
        <style>
        #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; }
        #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; }
        </style>
        <script>
        $(function() {
                $( "#sortable1" ).sortable({
                        delay: 300
                });

                $( "#sortable2" ).sortable({
                        distance: 15
                });

                $( "li" ).disableSelection();
        });
        </script>
</head>
<body>

<h3 class="docs">Time delay of 300ms:</h3>

<ul id="sortable1">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
</ul>

<h3 class="docs">Distance delay of 15px:</h3>

<ul id="sortable2">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
</ul>

<div class="demo-description">
<p>
        Prevent accidental sorting either by delay (time) or distance. Set a number of
        milliseconds the element needs to be dragged before sorting starts
        with the <code>delay</code> option. Set a distance in pixels the element
        needs to be dragged before sorting starts with the <code>distance</code>
        option.
</p>
</div>
</body>
</html>
1	<!doctype html>
2	<html lang="en">
3	<head>
4	<meta charset="utf-8">
5	<title>jQuery UI Sortable - Delay start</title>
6	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7	<script src="../../jquery-1.9.1.js"></script>
8	<script src="../../ui/jquery.ui.core.js"></script>
9	<script src="../../ui/jquery.ui.widget.js"></script>
10	<script src="../../ui/jquery.ui.mouse.js"></script>
11	<script src="../../ui/jquery.ui.sortable.js"></script>
12	<link rel="stylesheet" href="../demos.css">
13	<style>
14	#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; }
15	#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; }
16	</style>
17	<script>
18	$(function() {
19	$( "#sortable1" ).sortable({
20	delay: 300
21	});
22
23	$( "#sortable2" ).sortable({
24	distance: 15
25	});
26
27	$( "li" ).disableSelection();
28	});
29	</script>
30	</head>
31	<body>
32
33	<h3 class="docs">Time delay of 300ms:</h3>
34
35	<ul id="sortable1">
36	<li class="ui-state-default">Item 1</li>
37	<li class="ui-state-default">Item 2</li>
38	<li class="ui-state-default">Item 3</li>
39	<li class="ui-state-default">Item 4</li>
40	</ul>
41
42	<h3 class="docs">Distance delay of 15px:</h3>
43
44	<ul id="sortable2">
45	<li class="ui-state-default">Item 1</li>
46	<li class="ui-state-default">Item 2</li>
47	<li class="ui-state-default">Item 3</li>
48	<li class="ui-state-default">Item 4</li>
49	</ul>
50
51	<div class="demo-description">
52	<p>
53	Prevent accidental sorting either by delay (time) or distance. Set a number of
54	milliseconds the element needs to be dragged before sorting starts
55	with the <code>delay</code> option. Set a distance in pixels the element
56	needs to be dragged before sorting starts with the <code>distance</code>
57	option.
58	</p>
59	</div>
60	</body>
61	</html>