script.aculo.us — сортировка элементов

Часто вам нужно предоставить пользователю возможность изменять порядок элементов (например, элементов в списке), перетаскивая их.

Без перетаскивания переупорядочение может быть кошмаром, но script.aculo.us предоставляет расширенную поддержку переупорядочения из коробки через класс Sortable . Элемент, который должен стать Sortable , передается методу create () в пространстве имен Sortable.

Сортируемый состоит из элементов элемента в элементе контейнера. Когда вы создаете новый Sortable, он заботится о создании соответствующих Draggables и Droppables .

Чтобы использовать возможности Sortable для script.aculo.us, вам необходимо загрузить модуль dragdrop , для которого также требуется модуль эффектов . Так что ваша минимальная загрузка для script.aculo.us будет выглядеть так —

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

Сортируемый синтаксис

Вот синтаксис метода create () для создания сортируемого элемента. Метод create () берет идентификатор элемента контейнера и сортирует их на основе переданных параметров.

Sortable.create('id_of_container',[options]);

Используйте Sortable.destroy, чтобы полностью удалить все обработчики событий и ссылки на Sortable, созданный Sortable.create.

ПРИМЕЧАНИЕ. — Вызов Sortable.create неявно вызывает Sortable.destroy, если указанный элемент уже был Sortable. Вот простой синтаксис для вызова функции уничтожения.

Sortable.destroy( element );

Сортируемые параметры

При создании объекта Sortable вы можете использовать один или несколько из следующих параметров.

тег

Определяет тип элементов в сортируемом контейнере, которые должны быть отсортированы с помощью перетаскивания. По умолчанию это «li».

только

Задает имя класса CSS или массив имен классов, которым должен обладать перетаскиваемый элемент, чтобы быть принятым объектом перетаскивания. Это похоже на опцию принятия Draggable. По умолчанию ограничения имени класса не применяются.

перекрытие

Один из ложных, горизонтальных или вертикальных . Управляет точкой, в которой происходит изменение порядка. По умолчанию вертикальный .

ограничение

Один из ложных, горизонтальных или вертикальных . Ограничивает движение перетаскиваемых сортируемых элементов. По умолчанию вертикальный .

политика сдерживания

Включает перетаскивание между сортируемыми таблицами. Принимает массив элементов или идентификаторов элементов. Важное примечание: чтобы обеспечить возможность двустороннего перетаскивания между контейнерами, поместите все вызовы Sortable.create после элементов контейнера.

справиться

То же, что параметр Draggable с тем же именем, указывающий элемент, который будет использоваться для запуска операций перетаскивания. По умолчанию каждый элемент имеет свой собственный дескриптор.

hoverclass

ореолы

Подобно параметру «Перетаскивание» с тем же именем, если этот параметр имеет значение «истина», исходный элемент операции перетаскивания остается на месте, пока полупрозрачная копия элемента перемещается вместе с указателем мыши. По умолчанию false . Эта опция не работает с IE.

dropOnEmpty

Если true, это позволяет сортируемым элементам быть помещенным в пустой список. По умолчанию false .

свиток

Если сортируемый контейнер обладает полосой прокрутки из-за настройки атрибута переполнения CSS, эта опция включает автоматическую прокрутку списка за пределами видимых элементов. По умолчанию false .

scrollSensitivity

Когда прокрутка включена, она регулирует точку, в которой происходит прокрутка. По умолчанию 20.

Scrollspeed

Когда прокрутка включена, она регулирует скорость прокрутки. По умолчанию 15.

дерево

Если это правда, это разрешает сортировку с подэлементами в сортируемом элементе. По умолчанию false.

treeTag

Если опция дерева включена, она указывает тип элемента контейнера для подэлемента, чьи дочерние элементы участвуют в сортируемом поведении. По умолчанию используется значение ul.

Вы можете предоставить следующие обратные вызовы в параметре options:

по изменению

Функция, которая будет вызываться при изменении порядка сортировки при перетаскивании. При перетаскивании из одного Sortable в другое, обратный вызов вызывается один раз для каждого Sortable. Получает затронутый элемент в качестве его параметра.

OnUpdate

Функция, которая будет вызываться после завершения операции перетаскивания, которая приводит к изменению порядка элементов.

Примеры сортировки

Это демо было проверено для работы в IE 6.0. Это также работает в последней версии Firefox.

Live Demo

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>
   </head>
   
   <body>
      <p>Drag and drop list items to sort them out</p>

      <ul id = "namelist">
         <li>Physics</li>
         <li>Chemistry</li>
         <li>Maths</li>
         <li>Botany</li>
         <li>Sociology</li>
         <li>English</li>
         <li>Hindi</li>
         <li>Sanskrit</li>
      </ul>
   </body>
</html>

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('imagelist',{tag:'div'});
         }
      </script>

      <style type = "text/css">
         div { cursor: move; }
         img { border: 1px solid red; margin:5px; }
      </style>
   </head>

   <body>
      <p>Drag and drop list images to re-arrange them</p>

      <div id = "imagelist">
         <div><img src = "/images/wml_logo.gif" alt="WML Logo" /></div>
         <div><img src = "/images/javascript.gif" alt="JS" /></div>
         <div><img src = "/images/html.gif" alt="HTML" /></div>
         <div><img src = "/images/css.gif" alt="CSS" /></div>
      </div>
   </body>
</html>

Sortable.serialize(element, options);

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }

         function serialize(container, name){
            $('display').innerHTML = 'Serialization of ' + 
            $(container).id + 
            ' is: <br/><pre>' + 
               Sortable.serialize( container,{ name:name} ) + 
            '</pre>';
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>	
   </head>

   <body>
      <p>Drag and drop list items to sort them out properly</p>

      <ul id = "namelist">
         <li id = "list1_1">Physics</li>
         <li id = "list1_2">Chemistry</li>
         <li id = "list1_3">Maths</li>
         <li id = "list1_4">Botany</li>
         <li id = "list1_5">Sociology</li>
         <li id = "list1_6">English</li>
      </ul>

      <p>Click following button to see serialized list which can be
         passed to backend script, like PHP, AJAX or CGI</p>
			
      <button type = "button" value = "Click Me" 
         onclick = "serialize('namelist', 'list')"> Serialize
      </button>

      <div id = "display" style = "clear:both;padding-top:32px"></div>
   </body>
</html>

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List1', {containment: ['List1','List2'], dropOnEmpty: true});

            Sortable.create('List2', {containment: ['List1','List2'], dropOnEmpty: true});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>		
   </head>

   <body>
      <p>Drag and drop list items from one list to another list</p>

      <div style = "float:left">
         <ul id = "List1">
            <li>Physics</li>
            <li>Chemistry</li>
            <li>Botany</li>
         </ul>
      </div>

      <div style = "float:left;margin-left:32px">
         <ul id = "List2">
            <li>Arts</li>
            <li>Politics</li>
            <li>Economics</li>
            <li>History</li>
            <li>Sociology</li>
         </ul>
      </div>
   </body>
</html>

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List' ,
               {
                  onUpdate: function() {
                     new Ajax.Request('file.php',
                        {
                           method: "post",
                           parameters: {data:Sortable.serialize('List')}
                        }
                     );
                  }
               }
            );
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>
   </head>

   <body>
      <p>When you will change the order, AJAX Request 
         will be made automatically.</p>

      <div style = "float:left">
         <ul id = "List">
            <li id = "List_1">Physics</li>
            <li id = "List_2">Chemistry</li>
            <li id = "List_3">Maths</li>
            <li id = "List_4">Botany</li>
         </ul>
      </div>
   </body>
</html>