MooTools-정렬 가능

Sortables는 웹 개발의 고급 기능이며 사용자 인터페이스 디자인으로 옵션을 열 수 있습니다. 또한 요소 ID 목록을 관리하고 서버 측 스크립팅에 유용한 "직렬화"라는 훌륭한 기능이 포함되어 있습니다.

새 정렬 가능한 개체 만들기

먼저 항목 목록을 변수로 보냅니다. 항목 목록의 배열을 원하는 경우 모든 컬렉션을 변수에 할당하십시오. 마지막으로 해당 변수를 정렬 가능한 생성자에 전달합니다. 정렬 가능한 객체를 생성하려면 다음 구문을 살펴보십시오.

통사론

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은 정렬 가능한 개체를 사용자 지정하는 다양한 옵션을 제공합니다. 옵션에 대해 논의하겠습니다.

억누르다

이 옵션은 목록 요소가 정렬 가능한 개체 내에서 uls 사이를 이동할 수 있는지 여부를 결정합니다. 예를 들어, 정렬 가능한 개체에 두 개의 ul이있는 경우 "constrain"목록 항목을 설정하여 상위 ul에"constrain: true". 제한 설정에 대한 다음 구문을 살펴보십시오.

Syntax

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

복제

이 옵션은 커서 아래에 복제 요소를 만드는 데 도움이됩니다. 목록 요소를 정렬하는 데 도움이됩니다. 복제에 대한 다음 구문을 살펴보십시오.

Syntax

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

핸들

핸들은 드래그 핸들 역할을하는 요소를 허용하는 옵션입니다. 이것은 목록 항목을 선택하거나 목록에있는 작업을 원할 때 유용합니다. 변수를 제공하지 않으면 기본적으로 false로 간주됩니다. 핸들 사용에 대한 다음 구문을 살펴보십시오.

Syntax

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

불투명

이 옵션을 사용하면 정렬 요소를 조정할 수 있습니다. 복제본을 사용하는 경우 불투명도는 정렬되는 요소에 영향을줍니다.

Syntax

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

돌아가는 것

이 옵션은 "false"또는 모든 Fx 옵션을 허용합니다. 되돌리기에서 Fx 옵션을 설정하면 정렬 된 요소가 제자리에 정착하는 효과가 생성됩니다. 되돌리기에 대한 다음 구문을 살펴보십시오.

Syntax

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
   }
});

스냅

이 옵션을 사용하면 요소가 따라 오기 시작하기 전에 사용자가 마우스를 드래그 할 픽셀 수를 확인할 수 있습니다.

Syntax

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

정렬 가능한 이벤트

Sortable은 멋지고 간단한 다음 이벤트를 제공합니다.

onStart − 드래그가 시작될 때 실행 (스냅이 시작되면)
onSort − 항목 순서가 변경 될 때 실행
onComplete − 요소를 제자리에 놓을 때 실행

정렬 가능한 방법

다음 정렬 가능한 메서드는 본질적으로 클래스에 속하는 함수입니다-

떼다()

detach ()를 사용하면 현재 핸들을 모두 "분리"하여 전체 목록 객체를 정렬 할 수 없게 만들 수 있습니다. 이것은 정렬을 비활성화하는 데 유용합니다.

붙이다()

이 메서드는 정렬 항목에 핸들을 "연결"하고 detach () 후 정렬을 활성화합니다.

addItems ()

이렇게하면 정렬 가능한 목록에 새 항목을 추가 할 수 있습니다. 사용자가 새 항목을 추가 할 수있는 정렬 가능한 목록이 있다고 가정 해 보겠습니다. 일단 새 항목을 추가하면 해당 새 항목에 대해 정렬을 활성화해야합니다.

removeItems ()

이 방법을 사용하면 정렬 가능한 목록에서 항목의 정렬 기능을 제거 할 수 있습니다. 특정 목록 내에서 특정 항목을 잠그고 다른 항목과 함께 정렬하지 않으려는 경우 유용합니다.

addLists ()

기존 목록에 새 항목을 추가하는 대신 정렬 가능한 개체에 완전히 새로운 목록을 추가 할 수 있습니다. 이 방법을 사용하면 여러 목록을 추가 할 수 있으므로 정렬 가능한 항목을 정말 쉽게 추가 할 수 있습니다.

removeLists ()

정렬 가능한 개체에서 목록을 제거하겠습니다. 특정 목록을 제자리에 고정하려는 경우에 유용합니다. 목록을 제거하고 다른 목록은 여전히 개체에 정렬 할 수 있지만 제거 된 목록의 내용은 잠글 수 있습니다.

serialize ()

이 모든 정렬은 훌륭하지만 데이터로 무언가를하고 싶다면 어떻게해야할까요? .serialize (); 항목 ID 목록과 목록 순서를 반환합니다. 인덱스 번호로 개체 내에서 데이터를 가져올 목록을 선택할 수 있습니다.

예

다음 예제는 번호가 매겨진 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>

다음과 같은 출력을 받게됩니다.

산출