드래그 앤 드롭을 구현하기 위해 MooTools 1.2에서 Drag.Move_Mootools

사용법은 우리가 본 다른 플러그인과 유사합니다. 먼저 "new" 키워드를 사용하여 Drag.Move 객체를 생성하고 이를 변수에 할당한 다음 옵션과 이벤트를 정의합니다. 이것이 전부입니다. 그러나 아래 예에 설명된 IE의 CSS 단점을 알고 있어야 합니다.
기본 사용법
드래그.이동
자신만의 드래그 개체를 만드는 것은 매우 쉽습니다. 아래 예를 살펴보십시오. Drag.Move 개체의 옵션 및 이벤트를 드래그 옵션 및 이벤트와 어떻게 분리했는지 확인하세요. Drag.Move 클래스는 Drag 클래스를 확장하여 Drag 클래스의 옵션과 이벤트를 허용할 수 있습니다. 오늘 우리는 Drag 클래스에 대해 구체적으로 이야기하지는 않지만 여전히 몇 가지 유용한 옵션과 이벤트를 살펴보고 싶습니다. 아래 코드를 보고 자세한 내용을 알아보세요.
참조 코드:

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

var myDrag = new Drag.Move(dragElement, {
// Drag.Move 옵션
droppables: dropElement,
컨테이너: dragContainer,
// 드래그 옵션
handle: dragHandle,
// Drag .Move 이벤트
// Drag.Move 이벤트는 드래그된 요소를 전달합니다.
// 드래그된 요소를 허용할 수 있는 요소도 있습니다(드롭 가능)
onDrop: function(el, dr ) {
// 허용되는 요소에 드래그된 요소의 ID 표시
alert(dr.get('id'))
},
// 드래그 이벤트
// 이벤트 전달 드래그 요소
onComplete: function(el) {
alert(el.get('id'))
}
}); 잠시 중단하겠습니다...
Drag.Move 옵션

Drag.Move 옵션에는 두 가지 매우 중요한 요소가 있습니다.
droppables - 놓기 가능한 요소에 대한 선택기를 설정합니다(이 요소는 드래그 관련 이벤트가 등록됩니다). )
컨테이너 - 드래그한 요소에 대한 컨테이너를 설정합니다(요소가 항상 컨테이너 내에 있는지 확인하기 위해)
이 옵션 설정은 매우 쉽습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다. // 여기서는 id

var dragElement = $ (' drag_element');// 여기서는

var dropElements = $$('.drag_element')
var dragContainer = $('drag_container'); / 이제 Drag.Move 객체를 생성합니다
var myDrag = new Drag.Move(dragElement , {
// Drag.Move 옵션
// 위에서 정의한 droppable을 droppables에 할당
droppables: dropElements ,
// 컨테이너 요소 변수를 컨테이너
container: dragContainer
})


이제 요소는 드래그 가능한 요소를 허용합니다. 드래그 앤 드롭 요소를 허용합니다.
Drag.Move 이벤트
이 이벤트를 사용하면 개체를 드래그하기 시작하거나 놓을 준비가 되는 등 다양한 지점에서 기능을 트리거할 수 있습니다. 각 Drag.Move 이벤트는 드래그 요소와 드래그 요소(항상 놓기 가능이라고 함)를 허용하는 요소를 매개변수로 전달합니다.
onDrop - 이 이벤트는 드래그 가능한 요소를 허용하는 요소 내에 드래그 가능한 요소를 놓을 때 시작됩니다.

onLeave - 이 이벤트는 드래그 가능한 요소가 드래그 가능한 요소를 허용하는 요소를 떠날 때 시작됩니다.
onEnter - 이 이벤트는 드래그 가능한 요소가 드래그 가능한 요소를 허용하는 요소에 들어갈 때 시작됩니다.
이러한 각 이벤트는 함수를 호출하며, 해당 이벤트가 실행될 때 각 함수가 호출됩니다.
참조 코드:




코드 복사

코드는 다음과 같습니다. var dragContainer = $(' drag_container'); var myDrag = new Drag.Move(dragElement , { // Drag.Move 옵션

droppables: dropElements ,

container: dragContainer ,
// 드래그 .Move 이벤트
// Drag.Move 함수는 드래그 가능한 요소(이 예에서는 'el')를 전달합니다
// 그리고 드래그 가능한 요소(이 예에서는 'dr')를 허용하는 요소
onDrop: function(el, dr) {
// 다음 문장의 의미는 다음과 같습니다.
// 드래그하는 요소가 드래그된 요소를 허용할 수 있는 요소 범위 내에 없는 경우
if ( ! dr) {
// 아무것도 하지 않음
}
// 그렇지 않은 경우(논리적으로 말하면
// 드래그하는 요소가 범위 내에서 드래그 요소를 허용하는 요소에 도달하는 경우)
/ / 이 이벤트를 수행하세요
else {
// 여기서 뭔가를 수행하세요
},
onLeave: function(el, dr) {
// 이 이벤트는 다음과 같은 경우에 트리거됩니다. 드래그된 요소는 드래그 개체를 허용하는 요소를 떠납니다.
},
onEnter: function(el, dr) {
// 이 이벤트는 드래그된 요소가 드래그를 허용하는 요소를 떠날 때 트리거됩니다. 객체. 움직이는 요소가 드래그 객체를 허용하는 요소에 들어갈 때 트리거됩니다.
}
});
일부 드래그 이벤트 및 옵션
드래그에는 다양한 옵션과 이벤트가 있지만 여기서는 극히 일부만 살펴보겠습니다.
스냅 - 옵션
스냅 옵션을 사용하면 드래그를 시작하기 전에 사용자의 마우스가 움직이는 최소 픽셀 수를 설정할 수 있습니다. 기본값은 6이지만 값이 숫자인 변수나 숫자로 설정할 수 있습니다. 분명히 여기에는 몇 가지 합리적인 제한이 있지만(예를 들어 snap을 1000으로 설정하는 것은 쓸모가 없습니다) 이는 사용자 경험을 사용자 정의할 때 유용할 것입니다.
참조 코드: [코드 복사] [코드 저장]
var myDrag = new Drag.Move(dragElement, {
// 드래그 옵션
snap: 10
}); 핸들 -
handle 옵션은 드래그 요소에 제어 개체를 추가합니다. 이 제어 개체는 "잡기"(끌기)할 수 있는 유일한 요소가 되어 다른 요소로 다른 작업을 수행할 수 있게 해줍니다. 컨트롤 개체를 설정하려면 이 요소를 호출하면 됩니다.
참조 코드:

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

// 여기 클래스 선택기를 사용하면 배열이 생성됩니다.
// 이렇게 하면 드래그 요소를 허용할 수 있는 여러 요소가 있는 경우 여러 컨트롤 개체를 쉽게 추가할 수 있습니다.
var dragHandle = $('drag_handle '); >var myDrag = new Drag.Move(dragElement, {
// 드래그 옵션
handle: dragHandle
})


onStart——Event

onStart는 단지 이름처럼 이 이벤트는 드래그가 시작될 때 트리거됩니다. 큰 스냅을 설정하면 마우스가 지정된 스냅 값보다 요소에서 멀어질 때까지 이 이벤트가 발생하지 않습니다.
참조 코드:

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

var myDrag = new Drag.Move(dragElement, {

// 드래그 옵션
// 드래그 옵션은 드래그된 요소를 매개변수로 전달합니다
onStart: function(el) {
// 시작할 때 여기에 배치합니다. dragging 원하는 모든 작업
}
});


onDarg - 이벤트

이 onDrag 이벤트는 요소를 드래그할 때 지속적으로 트리거됩니다.
참조 코드:

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

var myDrag = new Drag.Move(dragElement , {

//드래그 옵션
//드래그 옵션은 드래그된 요소를 매개변수로 전달합니다
onDrag: function(el) {
//여기에 배치합니다. 원하는 모든 것을 드래그하세요
}
});


onComplete - 이벤트

마지막으로 드래그한 요소를 드롭할 때 실행되는 onComplete 이벤트가 있습니다. 드래그 가능한 요소를 허용하는 요소 안에 배치했습니다.
참조 코드:

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

var myDrag = new Drag.Move(dragElement, {

// 드래그 옵션
// 드래그 옵션은 드래그된 요소를 매개변수로 전달합니다
onComplete: function(el) {
// 원하는 모든 것을 드래그하세요.
}
})


코드 예

다양한 이벤트가 트리거될 때 다른 콘텐츠를 강조 표시하는 방식으로 지금 코드를 결합해 보겠습니다. , 위에서 본 옵션을 사용하여 Drag.Move 개체를 구성합니다.
참조 코드:

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

window.addEvent('domready', function() {
var dragElement = $('drag_me');
var dragContainer = $('drag_cont');
var dragHandle = $('drag_me_handle');
var dropElement = $$('.draggable');
var startEl = $('start')
varcompleteEl = $('complete'); >var dragIndicatorEl = $('drag_ind');
var enterDrop = $('enter');
var LeaveDrop = $('leave')
var dropDrop = $('drop_in_droppable');
var myDrag = new Drag.Move(dragElement, {
// Drag.Move选项
droppables: dropElement,
컨테이너: dragContainer,
// Drag选项
핸들: dragHandle ,
// Drag.Move사건
onDrop: function(el, dr) {
if (!dr) { }
else {
dropDrop.highlight('#FB911C'); //橙color闪烁
el.highlight('#fff'); //白color闪烁
dr.highlight('#667C4A') //绿color闪烁
},
onLeave: function(el, dr) {
leaveDrop.highlight('#FB911C'); //색상변화
},
onEnter: function(el, dr) {
enterDrop.highlight ('#FB911C'); //색깔색
},
// Drag事件
onStart: function(el) {
startEl.highlight('#FB911C') //색색闪烁
},
onDrag: function(el) {
dragIndicatorEl.highlight('#FB911C'); //색상변화
},
onComplete: function(el) {
completeEl.highlight('#FB911C'); //橙color闪烁
}
});
}); 参考代码：

复主代码

代码如下: /* 下面这个定义通常是不错的主意 */ body { margin: 0

padding: 0

}
/* 确保可拖动的元素유 "위치: 절대" */
/* 并设置开始时的왼쪽 및 상단 위치성 */
#drag_me {
너비: 100px
높이: 100px
배경색: #333
위치: 절대
상단: 0
왼쪽: 0
}
#drop_here {
너비: 200px
높이: 200px
배경색: # eee
}
/* 确保拖动的容器유“위치:상대적” */
#drag_cont {
배경색: #ccc
높이: 600px
너비: 500px
위치: 상대
여백 상단: 100px
왼쪽 여백: 100px
}
#drag_me_handle {
너비: 100%
높이: 자동
배경- 색상: #666
}
#drag_me_handle 범위 {
디스플레이: 블록
패딩: 5px
}
.indicator {
너비: 100%
높이: 자동
배경 색상: #0066FF
테두리 하단: 1px 단색 #eee
}
.indicator 범위 {
패딩: 10px
디스플레이: 블록
}
.draggable {
너비: 200px
높이: 200px
배경색: 파란색
}


现我们再建立我们的HTML:
参考代码:

复主代码

代码如下:

拖动开始

拖动中

拖动结束

进入了Droppable元素

离开了Droppable元素

放进了Droppable元素

控제对象

자세히 알아보기…

문서의 관련 섹션은 다음과 같습니다.

• 드래그
• 드래그.이동

시작하는 데 필요한 모든 것이 포함된 zip 패키지를 다운로드하세요.

MooTools 1.2 핵심 라이브러리, MooTools 1.2 확장 라이브러리, 기능이 포함된 외부 JavaScript 파일, 스타일을 정의하는 외부 CSS 파일, 간단한 HTML 파일 및 위의 예가 포함되어 있습니다.