Учебники

MooTools — сортируемые

Сентябрь 8, 2018

Sortables — это продвинутая функция в веб-разработке, которая может действительно открыть варианты с вашим дизайном пользовательского интерфейса. Он также включает в себя отличную функцию serialize, которая управляет списком идентификаторов элементов и полезна для сценариев на стороне сервера.

Создание нового сортируемого объекта

Сначала мы отправляем список элементов в переменную. Если вам нужен массив из списка элементов, то присвойте всю коллекцию переменной. И, наконец, передайте эту переменную сортируемому конструктору. Взгляните на следующий синтаксис для создания сортируемого объекта.

Синтаксис 

var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);

Ниже приведен HTML-код для синтаксиса.

Синтаксис 

<ul id = "listA">
   <li>Item A1</li>
   <li>Item A2</li>
   <li>Item A3</li>
   <li>Item A4</li>
</ul>

<ul id = "listB">
   <li>Item B1</li>
   <li>Item B2</li
   <li>Item B3</li>
   <li>Item B4</li>
</ul>

Вариант сортировки

Sortable предоставляет различные параметры для настройки сортируемого объекта. Давайте обсудим варианты.

принуждать

Эта опция определяет, могут ли элементы списка перемещаться между ссылками в сортируемом объекте. Например, если в сортируемом объекте есть два элемента UL, вы можете « ограничить » элементы списка до их родительского ul, установив « constrain: true ». Взгляните на следующий синтаксис для установки ограничений.

Синтаксис 

var sortableLists = new Sortables(sortableListsArray, {
   constrain: true //false is default
});

клон

Эта опция поможет вам создать элемент-клон под вашим курсором. Помогает в сортировке элементов списка. Взгляните на следующий синтаксис клона.

Синтаксис 

var sortableLists = new Sortables(sortableListsArray, {
   clone: true //false is default
});

Справиться

Дескриптор — это опция, которая принимает элемент в качестве дескриптора перетаскивания. Это полезно всякий раз, когда вы хотите, чтобы элементы списка были доступны для выбора, или если вы хотите какие-либо действия в вашем списке. Если вы не предоставите какую-либо переменную, она будет считаться ложной по умолчанию. Взгляните на следующий синтаксис для использования дескриптора.

Синтаксис 

var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
   handle: handleElements //false is default
});

помутнение

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

Синтаксис 

var sortableLists = new Sortables(sortableListsArray, {
   opacity: 1 //default is 1
});

возвращаться

Эта опция принимает либо «ложь», либо любую опцию Fx. Если вы установите опцию Fx в пределах revert, это создаст эффект для установленного элемента. Взгляните на следующий синтаксис для возврата.

Синтаксис 

var sortableLists = new Sortables(sortableListsArray, {
   revert: false //this is the default
});

//you can also set Fx options
var sortableLists = new Sortables(sortableListsArray, {
   revert: {
      duration: 50
   }
});

Щелчок

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

Синтаксис 

var sortableLists = new Sortables(sortableListsArray, {
   snap: 10 //user will have to drag 10 px to start the list sorting
});

Сортируемые события

Sortable предоставляет следующие приятные и понятные события.

  • onStart — выполняется, когда начинается перетаскивание (один раз щелчок переходит)

  • onSort — выполняется, когда элементы меняют порядок

  • onComplete — выполняется, когда вы удаляете элемент на месте

onStart — выполняется, когда начинается перетаскивание (один раз щелчок переходит)

onSort — выполняется, когда элементы меняют порядок

onComplete — выполняется, когда вы удаляете элемент на месте

Сортируемые Методы

Следующие сортируемые методы по существу являются функциями, которые принадлежат классам —

отсоединить ()

С detach () вы можете «отсоединить» все текущие дескрипторы, делая весь объект списка не сортируемым. Это полезно для отключения сортировки.

прикреплять()

Этот метод «прикрепляет» дескрипторы к элементам сортировки, работает для включения сортировки после detach ().

AddItems ()

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

removeItems ()

Этот метод позволяет удалить возможность сортировки элемента в сортируемом списке. Это полезно, когда вы хотите заблокировать определенный элемент в определенном списке и не позволять его сортировать с другими.

addLists ()

Вместо того, чтобы просто добавить новый элемент в существующий список, вы можете добавить новый список в сортируемый объект. Этот метод позволяет добавлять несколько списков, что позволяет легко добавлять больше сортируемых элементов.

removeLists ()

Давайте удалим списки из сортируемого объекта. Это полезно, когда вы хотите заблокировать определенный список на месте. Вы можете удалить список, оставив остальные списки в объекте, которые можно сортировать, но заблокировав содержимое удаленного списка.

сериализации ()

Вся эта сортировка великолепна, но что если вы захотите что-то сделать с данными? .serialize (); вернет список идентификаторов элементов, а также их порядок в списке. Вы можете выбрать, какой список получить данные из объекта по номеру индекса.

пример

В следующем примере создается массив элементов div с нумерацией. Позже, измените их, нажимая, перетаскивая действия, используя указатель мыши. Посмотрите на следующий код. 

<!DOCTYPE html>
<html>
   
   <head>
      <style>
         #test {
            position: inherit;
         }
         ul#sortables {
            width: 300px;
            margin: 0;
            padding: 0;
         }
         li.sortme {
            padding: 4px 8px;
            color: #fff;
            cursor: pointer;
            list-style: none;
            width: 300px;
            background-color: #222;
            border: 1px solid;
         }
         ul#sortables li {
            margin: 10px 0;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            new Sortables($('test'), {
               initialize: function(){
                  var step = 0;
                  
                  this.elements.each(function(element, i) {
                     var color = [step, 82, 87].hsbToRgb();
                     element.setStyle('background-color', color);
                     step = step + 35;
                     element.setStyle('height', $random(40, 100));
                  });
               }
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "test">
         <li class = "sortme">0</li>
         <li class = "sortme">1</li>
         <li class = "sortme">2</li>
         <li class = "sortme">3</li>
         <li class = "sortme">4</li>
         <li class = "sortme">5</li>
         <li class = "sortme">6</li>
         <li class = "sortme">7</li>
         <li class = "sortme">8</li>
         <li class = "sortme">9</li>
         <li class = "sortme">10</li>
      </ul>
   </body>
   
</html>

Вы получите следующий вывод —

46
Share: