Ticket #4303: sortable.receive-callback.ui.html

File sortable.receive-callback.ui.html, 2.0 KB (added by Marc Diethelm, 13 years ago)

Testcase

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4    <title></title>
5    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
7    <script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
8    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.core.js"></script>
9    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.sortable.js"></script>
10    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.draggable.js"></script>
11    <style type="text/css">
12        #sortable, #draggables { border:1px solid black; }
13    </style>
14
15    <script type="text/javascript">
16
17        jQuery(function ($) {
18
19            $("#sortable").sortable({
20                receive: function(event, ui)
21                {
22                    $("#out-1").text(
23                        "#" + $(ui.sender).attr("id")
24                    );
25                    $("#out-2").text(
26                        "#" + $(ui.item).attr("id")
27                    );
28                    $("*").css("background-color", "inherit"); // reset before setting again
29                    $(ui.item).css("background-color", "pink");
30                    return true;
31                }
32            });
33
34            $("#draggables div").draggable({
35                helper: "clone",
36                connectToSortable: "#sortable"
37            });
38
39        });
40
41    </script>
42</head>
43
44<body>
45    #draggables
46    <div id="draggables">
47        <div id="draggable_item_1">draggable item 1</div>
48        <div id="draggable_item_2">draggable item 2</div>
49    </div>
50
51    <br />
52    <br />
53    #sortable
54    <div id="sortable">
55        <div>sortable item 1</div>
56        <div>sortable item 2</div>
57    </div>
58
59    <br />
60    <br />
61    receive: ui.sender = <span id="out-1"> </span><br />
62    receive: ui.item = <span id="out-2"> </span>
63
64
65</body>
66</html>