4
<title>jQuery UI Draggable + Sortable</title>
5
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7
<script type="text/javascript" src="../../ui/ui.core.js"></script>
8
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
9
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
10
<link type="text/css" href="../demos.css" rel="stylesheet" />
11
<style type="text/css">
12
.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
13
.demo li { margin: 5px; padding: 5px; width: 150px; }
15
<script type="text/javascript">
17
$("#sortable").sortable({
20
$("#draggable").draggable({
21
connectToSortable: '#sortable',
25
$("ul, li").disableSelection();
33
<li id="draggable" class="ui-state-highlight">Drag me down</li>
37
<li class="ui-state-default">Item 1</li>
38
<li class="ui-state-default">Item 2</li>
39
<li class="ui-state-default">Item 3</li>
40
<li class="ui-state-default">Item 4</li>
41
<li class="ui-state-default">Item 5</li>
44
</div><!-- End demo -->
46
<div class="demo-description">
49
Draggables are built to interact seamlessly with <a href="#">sortables</a>.
52
</div><!-- End demo-description -->