Bug Tracker

Ticket #2261: dragDropInterface.htm

File dragDropInterface.htm, 3.5 KB (added by SkeletonMan, 14 years ago)

Test case. Note how any boxes below the scrolling point do not sort correctly.

Line 
1<html>
2<head>
3<script src="jquery-1.2.1.pack.js"></script>
4<script src="iutil.js"></script>
5<script src="idrag.js"></script>
6<script src="idrop.js"></script>
7<script src="isortables.js"></script>
8
9<script>
10$(document).ready(function(){
11
12 $("#myList").Sortable(
13 {
14  accept: 'item',
15  floats: true,
16  helperclass: 'sorthelper'
17 });
18
19});
20</script>
21<style>
22div { background: #d4d4d4; }
23.sorthelper { background: #FFFFFF; float: left; }
24</style>
25</head>
26<body>
27
28
29<div id="myList" style="width: 830px; height: 800px;  border: 1px solid #000000; background: #FFFFFF; overflow-x: hidden; overflow-y: scroll;">
30 <div class="item" id="item1" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 1</div>
31 <div class="item" id="item2" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 2</div>
32 <div class="item" id="item3" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 3</div>
33 <div class="item" id="item4" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 4</div>
34 <div class="item" id="item5" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 5</div>
35 <div class="item" id="item6" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 6</div>
36 <div class="item" id="item7" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 7</div>
37 <div class="item" id="item8" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 8</div>
38 <div class="item" id="item9" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 9</div>
39 <div class="item" id="item10" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 10</div>
40 <div class="item" id="item11" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 11</div>
41 <div class="item" id="item12" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 12</div>
42 <div class="item" id="item13" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 13</div>
43 <div class="item" id="item14" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 14</div>
44 <div class="item" id="item15" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 15</div>
45 <div class="item" id="item16" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 16</div>
46 <div class="item" id="item17" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 17</div>
47 <div class="item" id="item18" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 18</div>
48 <div class="item" id="item19" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 19</div>
49 <div class="item" id="item20" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 20</div>
50 <div class="item" id="item21" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 21</div>
51 <div class="item" id="item22" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 22</div>
52 <div class="item" id="item23" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 23</div>
53 <div class="item" id="item24" style="width: 200px; height: 200px; border: 1px solid #0000FF; float: left;">Item 24</div>
54</div>
55
56</body>
57</html>