JavaScript DHTML/jQuery/UI Sortable

Материал из Web эксперт
Версия от 07:24, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

jQuery UI Sortable - Connect lists

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Sortable - Connect lists</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #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() {
    $("#sortable1, #sortable2").sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });
  </script>
</head>
<body>
<div class="demo">
<ul id="sortable1" class="connectedSortable">
  <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>
  <li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>
</div><!-- End demo -->
<div class="demo-description">
<p>
  Sort items from one list into another and vice versa, by passing a selector 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 (i.e., <code>connectWith: ".myclass"</code>).
</p>
</div><!-- End demo-description -->
</body>
</html>



jQuery UI Sortable - Connect lists with Tabs

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Sortable - Connect lists with Tabs</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
  <script type="text/javascript" src="js/ui/ui.droppable.js"></script>
  <script type="text/javascript" src="js/ui/ui.tabs.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#sortable1, #sortable2").sortable().disableSelection();
    var $tabs = $("#tabs").tabs();
    var $tab_items = $("ul:first li",$tabs).droppable({
      accept: ".connectedSortable li",
      hoverClass: "ui-state-hover",
      drop: function(ev, ui) {
        var $item = $(this);
        var $list = $($item.find("a").attr("href")).find(".connectedSortable");
        ui.draggable.hide("slow", function() {
          $tabs.tabs("select", $tab_items.index($item));
          $(this).appendTo($list).show("slow");
        });
      }
    });
  });
  </script>
</head>
<body>
<div class="demo">
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
  </ul>
  <div id="tabs-1">
    <ul id="sortable1" class="connectedSortable ui-helper-reset">
      <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>
      <li class="ui-state-default">Item 5</li>
    </ul>
  </div>
  <div id="tabs-2">
    <ul id="sortable2" class="connectedSortable ui-helper-reset">
      <li class="ui-state-highlight">Item 1</li>
      <li class="ui-state-highlight">Item 2</li>
      <li class="ui-state-highlight">Item 3</li>
      <li class="ui-state-highlight">Item 4</li>
      <li class="ui-state-highlight">Item 5</li>
    </ul>
  </div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>
  Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.
</p>
</div><!-- End demo-description -->
</body>
</html>



jQuery UI Sortable - Default functionality

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Sortable - Default functionality</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #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">
  $(function() {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
  });
  </script>
</head>
<body>
<div class="demo">
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</div><!-- End demo -->
<div class="demo-description">
<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 <code>draggable</code> properties.
</p>
</div><!-- End demo-description -->
</body>
</html>



jQuery UI Sortable - Delay start

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Sortable - Delay start</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; }
  #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#sortable1").sortable({
      delay: 300
    });
    
    $("#sortable2").sortable({
      distance: 15
    });
    $("li").disableSelection();
  });
  </script>
</head>
<body>
<div class="demo">
<h3 class="docs">Time delay of 300ms:</h3>
<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 class="docs">Distance delay of 15px:</h3>
<ul id="sortable2">
  <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>
</div><!-- End demo -->
<div class="demo-description">
<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 -->
</body>
</html>



jQuery UI Sortable - Display as grid

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Sortable - Display as grid</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #sortable { list-style-type: none; margin: 0; padding: 0; }
  #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
  });
  </script>
</head>
<body>
<div class="demo">
<ul id="sortable">
  <li class="ui-state-default">1</li>
  <li class="ui-state-default">2</li>
  <li class="ui-state-default">3</li>
  <li class="ui-state-default">4</li>
  <li class="ui-state-default">5</li>
  <li class="ui-state-default">6</li>
  <li class="ui-state-default">7</li>
  <li class="ui-state-default">8</li>
  <li class="ui-state-default">9</li>
  <li class="ui-state-default">10</li>
  <li class="ui-state-default">11</li>
  <li class="ui-state-default">12</li>
</ul>
</div><!-- End demo -->
<div class="demo-description">
<p>
  To arrange sortable items as a grid, give them identical dimensions and
  float them using CSS.
</p>
</div><!-- End demo-description -->
</body>
</html>



jQuery UI Sortable - Drop placeholder

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Sortable - Drop placeholder</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
  html>body #sortable li { height: 1.5em; line-height: 1.2em; }
  .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#sortable").sortable({
      placeholder: "ui-state-highlight"
    });
    $("#sortable").disableSelection();
  });
  </script>
</head>
<body>
<div class="demo">
<ul id="sortable">
  <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>
  <li class="ui-state-default">Item 5</li>
  <li class="ui-state-default">Item 6</li>
  <li class="ui-state-default">Item 7</li>
</ul>
</div><!-- End demo -->
<div class="demo-description">
<p>
  When dragging a sortable item to a new location, other items will make room
  for the that item by shifting to allow white space between them. Pass a
  class into the <code>placeholder</code> option to style that space to
  be visible.  Use the boolean <code>forcePlaceholderSize</code> option
  to set dimensions on the placeholder.
</p>
</div><!-- End demo-description -->
</body>
</html>



jQuery UI Sortable - Handle empty lists

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Sortable - Handle empty lists</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
  #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("ul.droptrue").sortable({
      connectWith: "ul"
    });
    $("ul.dropfalse").sortable({
      connectWith: "ul",
      dropOnEmpty: false
    });
    $("#sortable1, #sortable2, #sortable3").disableSelection();
  });
  </script>
</head>
<body>
<div class="demo">
<ul id="sortable1" class="droptrue">
  <li class="ui-state-default">Can be dropped..</li>
  <li class="ui-state-default">..on an empty list</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="dropfalse">
  <li class="ui-state-highlight">Cannot be dropped..</li>
  <li class="ui-state-highlight">..on an empty list</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>
<ul id="sortable3" class="droptrue">
</ul>
<br clear="both" />
</div><!-- End demo -->
<div class="demo-description">
<p>
  Prevent all items in a list from being dropped into a separate, empty list
  using the <code>dropOnEmpty</code> option set to <code>false</code>.  By default,
  sortable items can be dropped on empty lists.
</p>
</div><!-- End demo-description -->
</body>
</html>



jQuery UI Sortable - Include / exclude items

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Sortable - Include / exclude items</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; }
  #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#sortable1").sortable({
      items: "li:not(.ui-state-disabled)"
    });
    $("#sortable2").sortable({
      cancel: ".ui-state-disabled"
    });
    $("#sortable1 li, #sortable2 li").disableSelection();    
  });
  </script>
</head>
<body>
<div class="demo">
<h3 class="docs">Specify which items are sortable:</h3>
<ul id="sortable1">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default ui-state-disabled">(I"m not sortable or a drop target)</li>
  <li class="ui-state-default ui-state-disabled">(I"m not sortable or a drop target)</li>
  <li class="ui-state-default">Item 4</li>
</ul>
<h3 class="docs">Cancel sorting (but keep as drop targets):</h3>
<ul id="sortable2">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default ui-state-disabled">(I"m not sortable)</li>
  <li class="ui-state-default ui-state-disabled">(I"m not sortable)</li>
  <li class="ui-state-default">Item 4</li>
</ul>
</div><!-- End demo -->
<div class="demo-description">
<p>
  Specify which items are eligible to sort by passing a jQuery selector into
  the <code>items</code> option. Items excluded from this option are not
  sortable, nor are they valid targets for sortable items.
</p>
<p>
  To only prevent sorting on certain items, pass a jQuery selector into the
  <code>cancel</code> option. Cancelled items remain valid sort targets for
  others.
</p>
</div><!-- End demo-description -->
</body>
</html>



jQuery UI Sortable - Portlets

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Sortable - Portlets</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  .column { width: 170px; float: left; padding-bottom: 100px; }
  .portlet { margin: 0 1em 1em 0; }
  .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
  .portlet-header .ui-icon { float: right; }
  .portlet-content { padding: 0.4em; }
  .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
  .ui-sortable-placeholder * { visibility: hidden; }
  </style>
  <script type="text/javascript">
  $(function() {
    $(".column").sortable({
      connectWith: ".column"
    });
    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
      .find(".portlet-header")
        .addClass("ui-widget-header ui-corner-all")
        .prepend("<span class="ui-icon ui-icon-plusthick"></span>")
        .end()
      .find(".portlet-content");
    $(".portlet-header .ui-icon").click(function() {
      $(this).toggleClass("ui-icon-minusthick");
      $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });
    $(".column").disableSelection();
  });
  </script>
</head>
<body>
<div class="demo">
<div class="column">
  <div class="portlet">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
  
  <div class="portlet">
    <div class="portlet-header">News</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
</div>
<div class="column">
  <div class="portlet">
    <div class="portlet-header">Shopping</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
</div>
<div class="column">
  <div class="portlet">
    <div class="portlet-header">Links</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
  
  <div class="portlet">
    <div class="portlet-header">Images</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>
  Enable portlets (styled divs) as sortables and use the <code>connectWith</code>
  option to allow sorting between columns.
</p>
</div><!-- End demo-description -->
</body>
</html>



Placehoder, helper for sortable

 
<html>
  <head>
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>  
    <script type="text/javascript">
$(document).ready(
  function() {
    $("ul").sortable({
      placeholder: "tmpPlaceholder",
      helper: function(e, element) {
      return $(element).clone().addClass("tmpHelper");
      },
      update : function(e, ui) {
        alert("updated");
      }
    });
  }
);
    </script>
    <style type="text/css">
ul {
    list-style: none;
}
li.tmpPlaceholder {
    height: 22px;
}
    </style>
  </head>
  <body>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
  </body>
</html>



Set containment to the container and distance to 30

 
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Sortable - Default functionality</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #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">
  $(function() {
        var sortOpts = {
          axis: "y",
          containment: "#container",
          cursor: "move",
          distance: 30
        };
      
        //make specified element sortable
        $("#sortable").sortable(sortOpts);
  });
  </script>
</head>
<body>
<div class="demo">
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</div><!-- End demo -->
<div class="demo-description">
<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 <code>draggable</code> properties.
</p>
</div><!-- End demo-description -->
</body>
</html>



sortable helperMaker

 
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Sortable - Default functionality</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #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">
  $(function() {
        var sortOpts = {
          helper: helperMaker
        };
        
        function helperMaker(e, ui) {
          
          return $("<div>").css({
            border:"4px solid #cccccc",
             opacity:"0.5"
          });
        }
  
      
        $("#sortable").sortable(sortOpts);
  });
  </script>
</head>
<body>
<div class="demo">
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</div>
</body>
</html>



sortable placeholder: "empty"

 
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Sortable - Default functionality</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #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">
  $(function() {
        var sortOpts = {
          placeholder: "empty"
        };
      
        $("#sortable").sortable(sortOpts);
  });
  </script>
</head>
<body>
<div class="demo">
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</div>
</body>
</html>



Sortable update event

 
<html>
  <head>
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>  
    <script type="text/javascript">
$(document).ready(
  function() {
    $("ul").sortable({
      placeholder: "tmpPlaceholder",
      helper: function(e, element) {
      return $(element).clone().addClass("tmpHelper");
      },
      update : function(e, ui) {
        alert("updated");
      }
    });
  }
);
    </script>
    <style type="text/css">
ul {
    list-style: none;
}
li.tmpPlaceholder {
    height: 22px;
}
    </style>
  </head>
  <body>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
  </body>
</html>



Sortable with place holder

 

<html>
  <head>
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>    
    <script type="text/javascript">
$(document).ready(
  function() {
    $("ul").sortable({
      placeholder: "tmpPlaceholder",
      helper: function(e, element) {
      return $(element).clone().addClass("tmpHelper");
      }
    });
  }
);
    </script>
    <style type="text/css">
ul {
    list-style: none;
}
li {
    background: rgb(218, 191, 162);
    padding: 3px;
    width: 244px;
}
li.tmpPlaceholder {
    background: rgb(110, 159, 128);
    height: 22px;
}
    </style>
  </head>
  <body>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
  </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/UI_Sortable&oldid=2925»