Skip to content
Permalink
Browse files

demos/sortable: some cleanup and consistency

  • Loading branch information
rdworth committed Jan 20, 2009
1 parent 670d3e0 commit d578a66d49f0779de7d99b68d35d97e5600d3167
@@ -8,8 +8,8 @@
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.demo ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
.demo li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script type="text/javascript">
$(function() {
@@ -42,7 +42,12 @@

<div class="demo-description">

<p>Sort items from one list into another and vice versa passing an array into the <strong>connectWith</strong> option. The simplest way to do this is to group all related lists with a CSS class, and then pass that class into the sortable function using array notation (i.e., connectWith: ['.myclass']).</p>
<p>
Sort items from one list into another and vice versa, by passing an array into
the <code>connectWith</code> option. The simplest way to do this is to
group all related lists with a CSS class, and then pass that class into the
sortable function using array notation (i.e., <code>connectWith: ['.myclass']</code>).
</p>

</div><!-- End demo-description -->

This file was deleted.

@@ -9,7 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script type="text/javascript">
@@ -35,7 +35,11 @@

<div class="demo-description">

<p>Enable a group of DOM elements to be sortable. Click on and drag and element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share <strong>draggable</strong> properties.</p>
<p>
Enable a group of DOM elements to be sortable. Click on and drag an
element to a new spot within the list, and the other items will adjust to
fit. By default, sortable items share <strong>draggable</strong> properties.
</p>

</div><!-- End demo-description -->

@@ -8,34 +8,36 @@
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px; }
.demo li { margin: 5px; padding: 5px; font-size: 1.2em; }
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; }
</style>
<script type="text/javascript">
$(function() {
$("#sortable").sortable({
delay: 1000
$("#sortable1").sortable({
delay: 300
});
$("#sortable2").sortable({
distance: 50
distance: 15
});
$("li").disableSelection();
});
</script>
</head>
<body>
<div class="demo">

<h3 class="docs">Time delay of 1000ms:</h3>
<h3 class="docs">Time delay of 300ms:</h3>

<ul id="sortable">
<ul id="sortable1">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
</ul>

<h3>Distance delay of 50px:</h3>
<h3 class="docs">Distance delay of 15px:</h3>

<ul id="sortable2">
<li class="ui-state-default">Item 1</li>
@@ -48,7 +50,13 @@ <h3>Distance delay of 50px:</h3>

<div class="demo-description">

<p>Delay the start of sorting for a number of milliseconds with the <strong>delay</strong> option; prevent sorting until the cursor is held down and dragged a specifed number of pixels with the <strong>distance</strong> option. </p>
<p>
Prevent accidental sorting either by delay (time) or distance. Set a number of
milliseconds the element needs to be dragged before sorting starts
with the <code>delay</code> option. Set a distance in pixels the element
needs to be dragged before sorting starts with the <code>distance</code>
option.
</p>

</div><!-- End demo-description -->

This file was deleted.

@@ -39,7 +39,10 @@

<div class="demo-description">

<p>To arrange sortable items as a grid, give them identical dimensions and float them using CSS.</p>
<p>
To arrange sortable items as a grid, give them identical dimensions and
float them using CSS.
</p>

</div><!-- End demo-description -->

This file was deleted.

This file was deleted.

0 comments on commit d578a66

Please sign in to comment.
You can’t perform that action at this time.