Mootools 1.2 클래스 및 방법 정렬에 대한 튜토리얼 소개

Sortables 클래스는 또한 "직렬화"라는 뛰어난 메서드를 제공합니다. 이를 통해 이러한 요소의 ID를 배열로 출력할 수 있습니다. 이는 서버측 개발에 매우 유용합니다. 다음으로, 정렬된 항목의 새 컬렉션을 만드는 방법을 살펴보고 마지막에 데모도 꼭 시청해 보세요.
기본 지식
새 정렬 가능한 개체 만들기
먼저 정렬하려는 요소를 변수에 할당해야 합니다. Sortables의 경우 여러 목록 사이의 요소를 서로 드래그할 수 있도록 하려면 다음과 같이 모든 요소를 배열에 넣어야 합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var sortableListsArray = $$('#listA, #listB')

이런 방식으로 두 개의 ul ID를 배열에 넣을 수 있습니다. 이제 이 배열에서 정렬 가능한 새 개체를 만들 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var sortableLists = new Sortables(sortableListsArray)

다음 HTML이 사용된다고 가정합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

 
 품목 A1 
 품목 A2

 품목 A3

 /ul> 

항목 B1

항목 B2
항목 B3< ;/li> 
항목 B4

정렬 가능한 목록은 결국 다음과 같습니다.

항목 A1
항목 A2
항목 A3
항목 A4
항목 B1
항목 B2
항목 B3
항목 B4

정렬 옵션
원하는 경우 자신만의 정렬 가능한 목록을 완전히 정의하려면 다음 옵션을 사용해야 합니다.
제한
기본값 - false
이 옵션은 정렬 가능한 목록 요소를 여러 ul 간에 드래그할 수 있는지 여부를 결정합니다.
예를 들어 정렬 가능한 개체에 ul이 두 개 있는 경우 "constain:true" 옵션을 설정하여 목록의 요소를 상위 노드 ul 내에서만 이동할 수 있도록 "제한"할 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var sortableLists = new Sortables( sortableListsArray, {

constrain: false // 기본값은 false 
}) 

 
clone 

Default - false
clone 옵션을 사용하면 " 복제된 요소는 마우스 움직임을 따라가며 원래 요소는 그대로 유지됩니다. 다음 예에서 clone 옵션을 사용하는 방법을 확인할 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다. 다음:

var sortableLists = new Sortables(sortableListsArray, {

clone: ​​​​true // 기본값은 false 
}) 

 
handle 

기본값—— false
핸들러 옵션은 요소를 드래그 컨트롤러로 허용할 수 있습니다. 이 매개변수는 목록의 텍스트를 선택 가능하게 유지하거나 li의 다른 동작을 유지하려는 경우 매우 편리합니다. 기본 매개변수는 false이며, 이는 전체 요소(li)를 컨트롤러로 만듭니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var handlerElements = $$( '.handlesClass');

var sortableLists = new Sortables(sortableListsArray, { 
handle: handlerElements // 기본값은 false 
}) 

 
불투명도 

Default — —1
불투명도 옵션을 사용하면 정렬된 요소를 조정할 수 있습니다. 복제본을 사용하는 경우 마우스 포인터에 더 가까운 복사본이 아닌 정렬된 요소에 불투명도가 적용됩니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

 
var sortableLists = new Sortables(sortableListsArray, { 
opacity: 1 // 기본값은 1 
}) 

revert
기본값 - false
revert 매개변수는 "false" 또는 Fx 옵션 값을 허용할 수 있습니다. 되돌리기 매개변수에 Fx 옵션을 설정하면 요소가 특정 위치에 배치될 때 해당 Fx 설정이 적용됩니다. 예를 들어, 마우스를 놓을 때 복제된 객체가 이 시간 내에 해당 위치로 돌아가도록 "duration:long"을 설정할 수 있습니다. 되돌리기의 효과를 확인하려면 다음 예를 살펴보세요.
참조 코드:

코드 복사 코드는 다음과 같습니다.

 
var sortableLists = new Sortables(sortableListsArray, { 
revert: false // 기본값은 false 
}); Fx 옵션으로도 설정하세요 
var sortableLists = new Sortables(sortableListsArray, { 
revert: { 
duration: 50 
} 
}) 

 

snap
기본값 - 4
스냅 매개변수를 사용하면 요소를 드래그하기 전에 마우스가 드래그해야 하는 픽셀 수를 설정할 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var sortableLists = new Sortables( sortableListsArray, {
snap: 10 // 이 드래그 목록을 드래그하려면 사용자가 10px를 드래그해야 합니다
});
정렬 가능한 이벤트
정렬 가능한 이벤트는 매우 훌륭하고 사용하기 매우 간단합니다. 각 요소에는 현재 드래그된 요소가 전달됩니다(콜론 요소를 사용한 경우 복제된 요소가 아닌 원래 요소).
onStart - 드래그가 시작될 때 트리거됨(스냅 트리거 이후)
onSort - 항목 순서가 변경될 때 트리거됨
onComplete - 요소를 드롭할 때 트리거됨
이러한 이벤트에 대해서는 나중에 자세히 살펴보겠습니다. 이후 예제에서 효과를 확인할 수 있습니다.)
정렬 방법
여러 가지 방법을 사용해 보았지만 이에 대해 자세히 이야기한 적은 없습니다. 메소드는 본질적으로 함수이지만 특정 클래스에 속합니다. 하지만 수업에 관해 이야기할 때 우리는 두 번째로 일반적인 개념을 정립하게 됩니다. 이 플러그인(우리가 이야기한 다른 플러그인과 마찬가지로)은 모두 비슷한 패턴을 따릅니다. "new"로 플러그인을 초기화하고, 하나 이상의 선택기 매개변수를 정의하고, 옵션을 정의하고, 일부 이벤트를 추가합니다. 새 정렬 가능 항목은 트윈과 유사합니다. ). 이 패턴은 클래스의 기본입니다. 가장 기본적으로 클래스를 사용하면 일부 옵션과 기능을 재사용할 수 있도록 저장할 수 있습니다. 메소드는 클래스의 특정 함수입니다. 인스턴스의 .set() 및 .get() 메소드는 요소의 속성 확장 메소드입니다. Fx.Tween에서 .start()는 메서드입니다. 보다 명확한 이해를 위해 정렬 가능한 방법을 살펴보겠습니다.
.detach();
.detach() 메소드를 사용하면 모든 컨트롤러를 분리하여 전체 목록을 드래그할 수 없게 만들 수 있습니다. 이는 드래그를 비활성화하는 데 유용합니다.
.attach();
이 메서드는 컨트롤러를 정렬 항목에 연결하며 .detach() 메서드를 사용한 후 정렬 기능을 다시 시작할 수 있습니다.
.addItems();
이 메소드를 사용하면 정렬된 목록에 새 항목을 추가할 수 있습니다. 이것이 의미하는 바는 사용자가 새 항목을 추가할 수 있는 정렬된 목록이 있고 새 항목을 추가한 후에는 해당 새 항목에 대한 정렬 기능을 활성화해야 한다는 것입니다.
.removeItems();
이 메소드를 사용하면 기존 정렬 목록에서 일부 요소를 제거할 수 있습니다. 이는 정렬에 참여하지 않도록 정렬된 목록의 일부 특수 항목을 잠가야 할 때 유용합니다.
.addLists();
기존 정렬 목록에 새 항목을 추가하는 것 외에도 정렬 목록에 새 목록을 추가할 수도 있습니다. .addLists(); 메서드를 사용하면 여러 목록을 추가할 수 있으므로 여러 정렬 개체를 쉽게 추가할 수 있습니다.
.removeLists();
을 사용하면 정렬된 개체에서 전체 목록을 제거할 수 있습니다. 이는 일부 특수 목록을 잠가야 할 때 유용합니다. 목록을 제거하면 나머지 항목은 계속 정렬되지만 제거된 목록은 잠깁니다.
.serialize();
이 정렬 기능은 매우 좋은데, 이 데이터를 처리하고 싶다면 어떻게 해야 할까요? .serialize(); 메서드는 이러한 항목 ID를 순서대로 포함하는 배열을 반환합니다. 인덱스 값으로 데이터를 가져오고 싶은 목록을 선택할 수 있습니다.
메서드의 영향은 여기서 다룰 수 있는 것 이상입니다. 이 내용을 처음 접하는 경우 개념에 대한 간단한 소개로 삼고 이후 튜토리얼에서 메서드와 클래스에 대해 더 자세히 논의하겠습니다.
코드 예시
다음 예시에서는 위에 설명된 일부 옵션, 모든 이벤트 및 모든 메서드를 사용합니다. 이 코드가 설명이 적고 설명이 더 많아 자명하기를 바랍니다. 아래의 모든 내용은 domready 이벤트 내에 있어야 한다는 점을 기억하세요.
참조 코드:

코드 복사 코드는 다음과 같습니다.

 
var sortableListsArray = $$('#numberlist, #letterlist'); 
var sortableLists = new Sortables(sortableListsArray, { 
// 이동할 때 마우스 움직임을 따라가도록 복사합니다. 
clone: ​​​​true, 
// 드래그 컨트롤러의 CSS 클래스 이름을 정의합니다(handle, handler) 
handle: '.handle', 
// 이후 특수 효과를 사용할 수 있습니다. 드래그 특정 위치로 다시 가져오기 
되돌리기: { 
// Fx 옵션 허용 
기간: 50 
}, 
// 마우스를 따라가는 대신 드래그된 요소의 불투명도 결정 복사
불투명도: .5, 
onStart: function(el){ 
// 전달되는 것은 드래그하는 요소입니다 
$('start_ind').highlight('#F3F865') ; 
el.highlight('#F3F865'); 
}, 
onSort: function(el) { 
// 전달되는 요소는 드래그하는 요소입니다. 
$('sort_ind ').highlight('#F3F865'); 
}, 
onComplete: function(el) { 
// 전달되는 것은 드래그하는 요소 
$('complete_ind')입니다. 하이라이트('#F3F865'); 
var listOne = sortableLists.serialize(0); 
var listTwo = sortableLists.serialize(1) 
$('numberOrder').set('text', listOne).highlight('#F3F865'); 
$('letterOrder').set('text', listTwo).highlight('#F3F865') ; detach(); // 버튼을 클릭하여 드래그할 수 있도록 컨트롤러를 비활성화합니다. 
var addListoSort = $('addListTest') 
$('addListButton').addEvent('click', function (){ 
sortableLists.addLists(addListoSort); 
}) 
$('removeListButton').addEvent('click', function(){ 
sortableLists.removeLists(addListoSort); 
}); 
$('enable_handles').addEvent('click', function(){ 
sortableLists.attach(); 
}) 
$('disable_handles') . addEvent('click', function(){ 
sortableLists.detach(); 
}) 
var itemOne = $('one') 
$('add_item').addEvent( 'click', function(){ 
sortableLists.addItems(itemOne); 
}) 
$('remove_item').addEvent('click', function(){ 
sortableLists.removeItems (itemOne) 
}); 

 
컨트롤러는 기본적으로 활성화되어 있지 않습니다(위 코드를 주의 깊게 살펴보세요). 드래그 정렬을 시작하려면 "정렬 활성화" 버튼을 클릭해야 합니다. 