[dygraphs.git] / mochikit_v14 / examples / dnd_sortable / sortable2_test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>script.aculo.us Sortable ghosting functional test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="../../MochiKit/MochiKit.js"></script>
        <script type="text/javascript" src="../../MochiKit/Position.js"></script>
        <script type="text/javascript" src="../../MochiKit/Visual.js"></script>
        <script type="text/javascript" src="../../MochiKit/Signal.js"></script>
        <script type="text/javascript" src="../../MochiKit/DragAndDrop.js"></script>
        <script type="text/javascript" src="../../MochiKit/Sortable.js"></script>
  <style>
    ul.testlist { 
      list-style-type:none;
      margin:0;
      padding:0;
    }
    ul.testlist li {
      width:200px;
      font:12px Verdana;
      padding:4px;
      cursor:move;
    }
    ul.testlist li.over {
      background-color:#fcb;
    }
    ul.testlist li img {
      float:left;
      margin-right:8px;
    }
    div.dropmarker {
      height:6px;
      width:200px;
      background: url(dropmarker.png) left top;
      margin-top:-3px;
      margin-left:-5px;
      z-index:1000;
      overflow: hidden;
    }
    #testlist4 li {
      float:left;
    }
  </style>
</head>
<body>
<h1>script.aculo.us Sortable ghosting functional test file</h1>

<h2>Ghosting</h2>

<ul id="testlist" class="testlist">
<li id="item_1"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_2"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_3"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_4"><img src="icon.png" alt=""/> elit</li>
<li id="item_5"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_6"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_7"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_8"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>

<p id="testlist_serialize">(waiting for onChange)</p>

<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
  MochiKit.Sortable.Sortable.create('testlist',{ghosting:true,constraint:false,hoverclass:'over',
    onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))},
    onChange:function(element){$('testlist_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)}
  });
// ]]>
</script>

<h2>No ghosting</h2>

<ul id="testlist2" class="testlist">
<li id="item_9"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_10"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_11"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_12"><img src="icon.png" alt=""/> elit</li>
<li id="item_13"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_14"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_15"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_16"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>

<p id="testlist2_serialize">(waiting for onChange)</p>

<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
  MochiKit.Sortable.Sortable.create('testlist2',{ghosting:false,constraint:false,hoverclass:'over',
    onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))},
    onChange:function(element){$('testlist2_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)}
  });
// ]]>
</script>

<h2>Ghosting (inside position:relative container)</h2>
<div style="position:relative;left:100px;top:-5px;">
<ul id="testlist3" class="testlist">
<li id="item_17"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_18"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_19"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_20"><img src="icon.png" alt=""/> elit</li>
<li id="item_21"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_22"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_23"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_24"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>
</div>
<p id="testlist3_serialize">(waiting for onChange)</p>

<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
  MochiKit.Sortable.Sortable.create('testlist3',{ghosting:true,constraint:false,
    onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))},
    onChange:function(element){$('testlist3_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)}
  });
// ]]>
</script>


<h2>Ghosting (inside position:relative container)</h2>
<div style="position:relative;left:100px;top:-5px;">
<ul id="testlist4" class="testlist">
<li id="item_417"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_418"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_419"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_420"><img src="icon.png" alt=""/> elit</li>
<li id="item_421"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_422"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_423"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_424"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>
</div>
<p id="testlist4_serialize">(waiting for onChange)</p>

<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
  MochiKit.Sortable.Sortable.create('testlist4',{overlap:'horizontal',ghosting:true,constraint:false,
    onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))},
    onChange:function(element){$('testlist4_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)}
  });
// ]]>
</script>


<div id="debug"></div>

</body>
</html>
Commit	Line	Data
6a1aa64f DV	1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	2	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	3	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	4	<head>
	5	<title>script.aculo.us Sortable ghosting functional test file</title>
	6	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	7	<script type="text/javascript" src="../../MochiKit/MochiKit.js"></script>
	8	<script type="text/javascript" src="../../MochiKit/Position.js"></script>
	9	<script type="text/javascript" src="../../MochiKit/Visual.js"></script>
	10	<script type="text/javascript" src="../../MochiKit/Signal.js"></script>
	11	<script type="text/javascript" src="../../MochiKit/DragAndDrop.js"></script>
	12	<script type="text/javascript" src="../../MochiKit/Sortable.js"></script>
	13	<style>
	14	ul.testlist {
	15	list-style-type:none;
	16	margin:0;
	17	padding:0;
	18	}
	19	ul.testlist li {
	20	width:200px;
	21	font:12px Verdana;
	22	padding:4px;
	23	cursor:move;
	24	}
	25	ul.testlist li.over {
	26	background-color:#fcb;
	27	}
	28	ul.testlist li img {
	29	float:left;
	30	margin-right:8px;
	31	}
	32	div.dropmarker {
	33	height:6px;
	34	width:200px;
	35	background: url(dropmarker.png) left top;
	36	margin-top:-3px;
	37	margin-left:-5px;
	38	z-index:1000;
	39	overflow: hidden;
	40	}
	41	#testlist4 li {
	42	float:left;
	43	}
	44	</style>
	45	</head>
	46	<body>
	47	<h1>script.aculo.us Sortable ghosting functional test file</h1>
	48
	49	<h2>Ghosting</h2>
	50
	51	<ul id="testlist" class="testlist">
	52	<li id="item_1"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
	53	<li id="item_2"><img src="icon.png" alt=""/> sit amet</li>
	54	<li id="item_3"><img src="icon.png" alt=""/> consectetur adipisicing</li>
	55	<li id="item_4"><img src="icon.png" alt=""/> elit</li>
	56	<li id="item_5"><img src="icon.png" alt=""/> sed do eiusmod</li>
	57	<li id="item_6"><img src="icon.png" alt=""/> tempor incididunt</li>
	58	<li id="item_7"><img src="icon.png" alt=""/> ut labore et dolore</li>
	59	<li id="item_8"><img src="icon.png" alt=""/> magna aliqua</li>
	60	</ul>
	61
	62	<p id="testlist_serialize">(waiting for onChange)</p>
	63
	64	<script type="text/javascript" language="javascript" charset="utf-8">
65	// <![CDATA[
66	MochiKit.Sortable.Sortable.create('testlist',{ghosting:true,constraint:false,hoverclass:'over',
67	onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))},
68	onChange:function(element){$('testlist_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)}
69	});
70	// ]]>
71	</script>
72
73	<h2>No ghosting</h2>
74
75	<ul id="testlist2" class="testlist">
76	<li id="item_9"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
77	<li id="item_10"><img src="icon.png" alt=""/> sit amet</li>
78	<li id="item_11"><img src="icon.png" alt=""/> consectetur adipisicing</li>
79	<li id="item_12"><img src="icon.png" alt=""/> elit</li>
80	<li id="item_13"><img src="icon.png" alt=""/> sed do eiusmod</li>
81	<li id="item_14"><img src="icon.png" alt=""/> tempor incididunt</li>
82	<li id="item_15"><img src="icon.png" alt=""/> ut labore et dolore</li>
83	<li id="item_16"><img src="icon.png" alt=""/> magna aliqua</li>
84	</ul>
85
86	<p id="testlist2_serialize">(waiting for onChange)</p>
87
88	<script type="text/javascript" language="javascript" charset="utf-8">
89	// <![CDATA[
90	MochiKit.Sortable.Sortable.create('testlist2',{ghosting:false,constraint:false,hoverclass:'over',
91	onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))},
92	onChange:function(element){$('testlist2_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)}
93	});
94	// ]]>
95	</script>
96
97	<h2>Ghosting (inside position:relative container)</h2>
98	<div style="position:relative;left:100px;top:-5px;">
99	<ul id="testlist3" class="testlist">
100	<li id="item_17"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
101	<li id="item_18"><img src="icon.png" alt=""/> sit amet</li>
102	<li id="item_19"><img src="icon.png" alt=""/> consectetur adipisicing</li>
103	<li id="item_20"><img src="icon.png" alt=""/> elit</li>
104	<li id="item_21"><img src="icon.png" alt=""/> sed do eiusmod</li>
105	<li id="item_22"><img src="icon.png" alt=""/> tempor incididunt</li>
106	<li id="item_23"><img src="icon.png" alt=""/> ut labore et dolore</li>
107	<li id="item_24"><img src="icon.png" alt=""/> magna aliqua</li>
108	</ul>
109	</div>
110	<p id="testlist3_serialize">(waiting for onChange)</p>
111
112	<script type="text/javascript" language="javascript" charset="utf-8">
113	// <![CDATA[
114	MochiKit.Sortable.Sortable.create('testlist3',{ghosting:true,constraint:false,
115	onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))},
116	onChange:function(element){$('testlist3_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)}
117	});
118	// ]]>
119	</script>
120
121
122	<h2>Ghosting (inside position:relative container)</h2>
123	<div style="position:relative;left:100px;top:-5px;">
124	<ul id="testlist4" class="testlist">
125	<li id="item_417"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
126	<li id="item_418"><img src="icon.png" alt=""/> sit amet</li>
127	<li id="item_419"><img src="icon.png" alt=""/> consectetur adipisicing</li>
128	<li id="item_420"><img src="icon.png" alt=""/> elit</li>
129	<li id="item_421"><img src="icon.png" alt=""/> sed do eiusmod</li>
130	<li id="item_422"><img src="icon.png" alt=""/> tempor incididunt</li>
131	<li id="item_423"><img src="icon.png" alt=""/> ut labore et dolore</li>
132	<li id="item_424"><img src="icon.png" alt=""/> magna aliqua</li>
133	</ul>
134	</div>
135	<p id="testlist4_serialize">(waiting for onChange)</p>
136
137	<script type="text/javascript" language="javascript" charset="utf-8">
138	// <![CDATA[
139	MochiKit.Sortable.Sortable.create('testlist4',{overlap:'horizontal',ghosting:true,constraint:false,
140	onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))},
141	onChange:function(element){$('testlist4_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)}
142	});
143	// ]]>
144	</script>
145
146
147	<div id="debug"></div>
148
149	</body>
150	</html>