Ticket #3658: draggable_sortable.test.html

File draggable_sortable.test.html, 1.7 KB (added by Marc Diethelm, 11 years ago)

Testcase

Line 
1<?xml version="1.0" encoding="UTF-8"?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4<head>
5    <title>Drag into Sortable Testcase</title>
6
7    <script src="http://code.jquery.com/jquery-latest.js"></script>
8    <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
9    <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>
10    <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.sortable.js"></script>
11
12    <style type="text/css" media="screen">
13        body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
14        #sort { width:100px; height:100px; border:1px solid #ccc; background:#444; overflow:auto }
15    </style>
16
17</head>
18<body>
19    Example taken from <a href="http://the-stickman.com/files/jquery/draggable-sortable.html">http://the-stickman.com/files/jquery/draggable-sortable.html</a> and modified as a testcase
20    <h1>Drag into Sortable Testcase</h1>
21
22
23    Drag from here...
24    <ul class="drag">
25    <li>1</li>
26    <li>2</li>
27    <li>3</li>
28    <li>4</li>
29    </ul>
30
31    ...and drop here...
32    <ul id="sort">
33    </ul>
34
35    <div id="out"></div>
36
37    <script type="text/javascript">
38    <!-- we run in the footer so no need to use onload -->
39    jQuery('.drag > li').draggable({
40        helper:'clone',
41        connectToSortable:'#sort'
42    });
43
44    jQuery('#sort').sortable({
45        receive: function()
46        {
47            jQuery("#out").append('<div>receive</div>');
48        },
49        update: function()
50        {
51            jQuery("#out").append('<div>update</div>');
52        }
53    });
54    </script>
55</body>
56</html>