Ticket #3018: sortables_bug.html

File sortables_bug.html, 2.0 KB (added by JimmyJam, 13 years ago)

Bug Example

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2"http://www.w3.org/TR/html4/loose.dtd">
3<html>
4<head>
5        <title>Menu Layout Proof Of Concept</title>
6        <script type="text/javascript" src="/js/src/jquery/jquery.js"></script>
7        <script type="text/javascript" src="/js/src/jquery/ui.core.js"></script>
8        <script type="text/javascript" src="/js/src/jquery/ui.draggable.js"></script>
9        <script type="text/javascript" src="/js/src/jquery/ui.droppable.js"></script>
10        <script type="text/javascript" src="/js/src/jquery/ui.sortable.js"></script>
11       
12        <script type="text/javascript">
13               
14                $(document).ready( function() {
15                        $('.wx_menu_column').sortable({});
16                        $('.wx_palette_item').draggable({
17                                helper: function() {
18                                        return $(this).clone().removeAttr("id").appendTo(document.body)
19                                                .css({
20                                                        zIndex: 100,
21                                                        opacity: .7
22                                                });
23                                }
24                        });
25                        $('#wx_link').data('connectToSortable.draggable', '.wx_menu_column');
26                        $('#wx_formatted_content').data('connectToSortable.draggable', '.wx_menu_column');
27                });
28        </script>
29        <style>
30                ul {
31                        list-style: none;
32                        padding: 0;
33                }
34                #parent_list > li {
35                        float: left;
36                        width: 33%;
37                }
38                #build_palette {
39                        clear: both;
40                }
41        </style>
42</head>
43<body>
44
45<ul id="parent_list">
46<li><ul class="wx_menu_column">
47                <li>Testing Lists</li>
48                <li>Testing Lists</li>
49                <li>Testing Lists</li>
50                <li>Testing Lists</li>
51        </ul>
52</li>
53
54<li><ul class="wx_menu_column">
55                <li>Testing Lists</li>
56                <li>Testing Lists</li>
57                <li>Testing Lists</li>
58                <li>Testing Lists</li>
59        </ul>
60</li>
61
62<li><ul class="wx_menu_column">
63                <li>Testing Lists</li>
64                <li>Testing Lists</li>
65                <li>Testing Lists</li>
66                <li>Testing Lists</li>
67        </ul>
68</li>
69</ul>
70
71<div id="build_palette">
72<br /><br />
73<ul id="Fields">
74        <li><strong>Draggable Fields</strong></li>
75        <li class="wx_palette_item" id="wx_link">Link Field</li>
76        <li class="wx_palette_item" id="wx_formatted_content">Formatted Content Field</li>
77</ul>
78</div>
79
80</body>
81</html>