<!DOCTYPE HTML>
<html>
<head>
<title>Outline Editing in Firefox 3.5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="en-us" />
<link rel="stylesheet" type="text/css" href="css/outline.css" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/outline.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.outline').outliner();
});
</script>
</head>
<body>
<div id="toc">
<h1>
Outline drag-and-drop in
<img id="logo" src="img/firefox-64.png" width="32" height="32" />
Firefox 3.5
</h1>
<p>
by l.m.orchard
<a href="http://decafbad.com">0xDECAFBAD</a>
</p>
<ol>
<li>Try reordering the outline items below by dragging them into new positions.</li>
<li>Try dragging in content selected from other browser windows and even other applications.</li>
<li><a href="js/outline.js">View the JS code.</a></li>
</ol>
<p><a href="api-demos.html">Back to the Drag & Drop demos</a></p>
</div>
<hr/>
<ul class="outline">
<li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></li>
<li><div>Maecenas sollicitudin mi ut mi vestibulum bibendum.</div></li>
<li>
<div>Donec molestie erat ut eros ultrices at mollis magna vehicula.</div>
<ul>
<li><div>Nunc elementum dui pharetra ante sodales dictum.</div></li>
<li><div>Quisque vitae augue ac diam ultricies pretium.</div></li>
<li><div>Aenean consectetur sapien sed elit mattis tincidunt.</div></li>
<li><div>Ut dapibus dui vel velit commodo non ullamcorper orci convallis.</div></li>
</ul>
</li>
<li>
<div>Praesent eget velit odio, eu laoreet quam.</div>
<ul>
<li><div>Cras eget velit ut lectus ornare malesuada.</div></li>
<li><div>Donec faucibus imperdiet nulla, id pretium est pharetra at.</div></li>
<li>
<div>Morbi ut lorem at lorem molestie mattis.</div>
<ul>
<li><div>Donec tempus massa vel leo blandit ut dictum ipsum dictum.</div></li>
<li><div>Donec feugiat interdum augue, at convallis felis pretium vel.</div></li>
<li><div>Ut sit amet turpis non ipsum sagittis vestibulum.</div></li>
<li><div>Maecenas sollicitudin mi ut mi vestibulum bibendum.</div></li>
</ul>
</li>
<li><div>Sed malesuada sapien ac erat laoreet ultrices.</div></li>
<li><div>Cras at justo non neque ullamcorper convallis.</div></li>
</ul>
</li>
<li>
<div>Sed malesuada sapien ac erat laoreet ultrices.</div>
<ul>
<li>
<div>Cras at justo non neque ullamcorper convallis.</div>
<ul>
<li>
<div>Donec tempus massa vel leo blandit ut dictum ipsum dictum.</div>
<ul>
<li><div>Donec feugiat interdum augue, at convallis felis pretium vel.</div></li>
<li><div>Ut sit amet turpis non ipsum sagittis vestibulum.</div></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><div>Maecenas sollicitudin mi ut mi vestibulum bibendum.</div></li>
</ul>
</body>
</html>