Bug Tracker

Ticket #2256: index.html

File index.html, 5.3 KB (added by agentrickard, 15 years ago)

Some test code. JS and CSS not attached.

Line 
1<?xml version="1.0" encoding="utf-8"?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5<head>
6  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
7  <title>MySite 6.x</title>
8  <script type="text/javascript" src="scripts/jquery-1.2.2.min.js"></script>
9  <script type="text/javascript" src="scripts/jquery.dimensions.js"></script>
10  <script type="text/javascript" src="scripts/ui.mouse.js"></script> 
11  <script type="text/javascript" src="scripts/ui.draggable.js"></script>
12  <script type="text/javascript" src="scripts/ui.draggable.ext.js"></script> 
13  <script type="text/javascript" src="scripts/ui.droppable.js"></script>
14  <script type="text/javascript" src="scripts/ui.droppable.ext.js"></script> 
15  <script type="text/javascript" src="scripts/ui.sortable.js"></script> 
16
17  <script>
18  /*
19  $(document).ready(function(){
20  //  $(".mysite").sortable({items: 'div.sortable-item'}); 
21    $("a.top").click(function () {
22      $(this).next('div.content').toggle();
23    }); 
24    $(".sortable-item").draggable({helper: 'clone'});
25    $(".droppable").droppable({
26      accept: ".sortable-item",
27      activeClass: 'droppable-active',
28      hoverClass: 'droppable-hover',
29      tolerance: 'pointer',
30      drop: function(ev, ui) {
31        var output = '';
32        $.each(ui.element, function(i, info){
33          output += i + ' : ' + info + '<br />';
34        });
35        var theData = ui.element.innerHTML;
36        var thisName = ui.element.className;
37        var objStr = thisName.replace('sortable-item ', '');
38        var objId = objStr.replace(' ui-draggable', '');
39        var blockStr = "." + objId;
40        $(".debug").append(blockStr);       
41        $(blockStr).remove();
42        $(this).append('<div class="sortable-item ' + objId + ' ui-draggable">' + theData + '<div>');
43        //$(".debug").append("<br />" + thisName + ' : -' + blockStr + '-<hr />' + output);
44      }
45    });
46    $(".mysite").sortable({
47      items: 'div.sortable-item',
48      start: function(e, ui) {
49        $(".debug").append('hi');
50      },     
51      update: function(e, ui) {
52        $(".debug").append('ho');
53      },
54      change: function(e, ui) {
55        $(".debug").append('he');
56      }     
57    });   
58  });  */
59  $(document).ready(function(){
60    $(".mysite").sortable({
61      items: 'div.sortable-item',
62      start: function(e, ui) {
63        $(".debug").append('hi');
64      },     
65      change: function(e, ui) {
66        $(".debug").append('ho');
67      },
68      stop: function(e, ui) {
69        $(".debug").append('ha');
70      },     
71      sort: function(e, ui) {
72        $(".debug").append('he');
73      }     
74    });
75    $("a.top").click(function () {
76      $(this).next('div.content').toggle();
77    });
78  });   
79  </script> 
80 
81  <style>
82  #boundary {
83    width: 500px;
84  }
85  .block { 
86   
87    border: 2px solid #0090DF;
88    background-color: #68BFEF;
89    width: 75px; 
90    height: 75px;
91    margin: 10px;
92    z-index: 100;
93  }
94  .drop { 
95    background-color: #e9b96e;
96    border: 3px double #c17d11;
97    width: 150px; 
98    height: 70px;
99    margin: 0 0 0 100px; 
100    float: left;
101    top: 5px;
102    right: 5px;
103    opacity: 0.7;
104  }
105  .droppable-active {
106    opacity: 1.0;
107  }
108  .droppable-hover {
109    outline: 1px dotted black;
110  }
111  </style> 
112  <style>@import url(style.css);</style>
113 
114<body>
115  <div id="region1" class="mysite droppable sortable">
116    <div class="sortable-item m1"><a href="#" href="#" class="top">Head</a><div class="content">Content 1</div></div>
117    <div class="sortable-item m2"><a href="#" class="top">Head</a><div class="content">Content 2</div></div>
118    <div class="sortable-item m3"><a href="#" class="top">Head</a><div class="content">Content 3</div></div>
119    <div class="sortable-item m4"><a href="#" class="top">Head</a><div class="content">Content 4</div></div>
120  </div>
121  <div id="region2" class="mysite droppable sortable">
122    <div class="sortable-item m5"><a href="#" class="top">Head</a><div class="content">Content 5</div></div>
123    <div class="sortable-item m6"><a href="#" class="top">Head</a><div class="content">Content 6</div></div>
124    <div class="sortable-item m7"><a href="#" class="top">Head</a><div class="content">Content 7</div></div>
125    <div class="sortable-item m8"><a href="#" class="top">Head</a><div class="content">Content 8</div></div>
126  </div> 
127  <div id="region3" class="mysite droppable sortable">
128    <div class="sortable-item m9"><a href="#" class="top">Head</a><div class="content">Content 9</div></div>
129    <div class="sortable-item m10"><a href="#" class="top">Head</a><div class="content">Content 10</div></div>
130    <div class="sortable-item m11"><a href="#" class="top">Head</a><div class="content">Content 11</div></div>
131    <div class="sortable-item m12"><a href="#" class="top">Head</a><div class="content">Content 12</div></div>
132  </div>   
133
134
135<div class="debug"></div>
136
137<!--
138<h4>Drag</h4>
139<div id="boundary">
140  <div class="block m20">drag me!</div>
141  <div class="block m21">no, drag me!</div> 
142  <div class="drop">drop on me!</div>
143  <div class="drop">drop on me!</div> 
144
145  <div class="block m21">drag me!</div>
146
147</div>
148<br clear="all" /><br /><br />
149<hr />
150
151<div class="debug"></div>
152
153<h4>Sort</h4>
154-->
155</body>
156</html>