MooTools-드래그 앤 드롭

MooTools는 웹 페이지 요소에 드래그 앤 드롭 드래그 기능을 추가하는 데 도움이되는 엄청난 기능을 제공합니다. 우리는 우리 자신의 새로운Drag.Move목적. 이 개체를 사용하여 옵션과 이벤트를 정의 할 수 있습니다. Drag and Drag.Move 클래스는 MooTools More 라이브러리에 있습니다.

Drag.Move 객체의 옵션과 이벤트에 대해 논의하겠습니다.

Drag.Move

Drag.Move는 html 요소에 끌어서 놓기 기능을 추가하는 데 사용되는 개체입니다. Drag.Move는 Drag를 확장하므로 Drag.Move 객체로 Drag 클래스의 모든 옵션 및 이벤트를 사용할 수 있습니다. 다음 구문을 살펴보고 Drag.Move 객체를 사용하는 방법을 이해합니다.

통사론

var myDrag = new Drag.Move(dragElement, {
   // Drag.Move Options
   droppables: dropElement,
   container: dragContainer,
   
   // Drag Options
   handle: dragHandle,

   // Drag.Move Events
   // the Drag.Move events pass the dragged element,
   // and the dropped into droppable element
   onDrop: function(el, dr) {
      //will alert the id of the dropped into droppable element
      alert(dr.get('id'));
   },
   // Drag Events
   // Drag events pass the dragged element
   onComplete: function(el) {
      alert(el.get('id'));
   }
});

Drag.Move 옵션

Drag.Move는 드래그 앤 드롭 기능으로 HTML 요소를 유지하기 위해 다음 옵션을 제공합니다-

  • droppable − 드롭 가능한 요소 (드롭 관련 이벤트에 등록하는 요소)의 선택기를 설정하는 데 도움이됩니다.

  • container − 드래그 요소의 컨테이너를 설정하는 데 도움이됩니다 (요소를 내부에 유지).

  • snap− 드래그 가능한 요소가 드래그를 시작하기 전에 사용자가 커서를 드래그해야하는 픽셀 수를 설정하는 데 도움이됩니다. 기본값은 6이며 숫자를 나타내는 여러 변수로 설정할 수 있습니다.

  • handle− 드래그 할 수있는 요소에 핸들을 추가하는 데 도움이됩니다. 손잡이는 그랩을 받아들이는 유일한 요소가됩니다.

놓기 가능 및 컨테이너, 스냅 및 핸들 요소를 정의하는 방법과 위치는 다음 구문을 참조하십시오.

통사론

//here we define a single element by id
var dragElement = $('drag_element');

//here we define an array of elements by class
var dropElements = $$('.drag_element');
var dragContainer = $('drag_container');
var dragHandle = $('drag_handle');

//now we set up our Drag.Move object
var myDrag = new Drag.Move(dragElement , {
   // Drag.Move Options
   // set up our droppables element with the droppables var we defined above
   droppables: dropElements ,
   
   // set up our container element with the container element var
   container: dragContainer
   
   // set up pixels the user must drag.
   Snap: 10
   
   // Adds a handle to your draggable element
   handle: dragHandle
});

Drag.Move 이벤트

Drag.Move 이벤트는 다양한 수준의 작업에서 사용할 수있는 다양한 기능을 제공합니다. 예를 들어, 객체를 드래그 또는 드롭하기 시작하면 각 Drag.Move 이벤트는 드래그 된 요소 또는 드롭 된 요소를 매개 변수로 전달합니다.

다음은 지원되는 이벤트입니다-

onStart ()

드래그 시작시 이벤트가 발생합니다. 긴 스냅을 설정하면 마우스가 멀리 떨어져있을 때까지이 이벤트가 발생하지 않습니다. 다음 구문을 살펴보십시오.

Syntax

var myDrag = new Drag.Move(dragElement , {
   // Drag options will pass the dragged element as a parameter
   onStart: function(el) {
      // put whatever you want to happen on start in here
   }
});

onDrag ()

이렇게하면 요소를 드래그하는 동안 이벤트가 계속 발생합니다. 다음 구문을 살펴보십시오.

Syntax

var myDrag = new Drag.Move(dragElement , {
   // Drag options will pass the dragged element as a parameter
   onDrag: function(el) {
      // put whatever you want to happen on drag in here
   }
});

onDrop ()

이렇게하면 드래그 가능한 요소를 드롭 가능한 요소에 놓을 때 이벤트가 발생합니다. 다음 구문을 살펴보십시오.

Syntax

var myDrag = new Drag.Move(dragElement , {
   // It will pass the draggable element ('el' in this case)
   // and the droppable element the draggable is interacting with ('dr' here)
   onDrop: function(el, dr) {
      // put whatever you want to happen on drop in here
   }
});

onLeave ()

드래그 가능한 요소가 드롭 가능한 요소의 경계를 벗어날 때 이벤트가 발생합니다. 다음 구문을 살펴보십시오.

Syntax

var myDrag = new Drag.Move(dragElement , {
   // It will pass the draggable element ('el' in this case)
   // and the droppable element the draggable is interacting with ('dr' here)
   onLeave: function(el, dr) {
      // put whatever you want to happen on Leave from droppable area in here
   }
});

onEnter ()

드래그 가능한 요소가 드롭 가능한 요소 영역에 들어갈 때 발생합니다. 다음 구문을 살펴보십시오.

Syntax

var myDrag = new Drag.Move(dragElement , {
   // It will pass the draggable element ('el' in this case)
   // and the droppable element the draggable is interacting with ('dr' here)
   onEnter: function(el, dr) {
      // this will fire when a draggable enters a droppable element
   }
});

onComplete ()

이것은 이벤트를 발생시킵니다. onComplete는 당신이 droppable을 떨어 뜨릴 때를 말하며, 당신이 droppable에 착륙하는지 여부에 관계없이 상승합니다. 다음 구문을 살펴보십시오.

Syntax

var myDrag = new Drag.Move(dragElement , {
   // Drag Options
   // Drag options will pass the dragged element as a parameter
   onComplete: function(el) {
      // put whatever you want to happen on complete
   }
});

이 장에서 설명하는 모든 기능을 살펴볼 예를 들어 보겠습니다. 기능은 — Drag, Drag.Move, onEnter, onLeave, onDrop, onStart, onDrag 및 onComplete입니다. 이 예에서는 드래그 가능한 개체를 컨테이너로 드래그 할 수있는 하나의 HANDLE을 제공합니다. 모든 작업에 대해 왼쪽에 알림이 있습니다 (파란색으로 표시됨). 컨테이너에 놓을 수있는 영역이 있습니다. Draggable 개체가 Droppable 영역에 들어가면 마지막 세 개의 표시기가 활성화됩니다. 다음 코드를 살펴보십시오.

Example

<!DOCTYPE html>
<html>

   <head>
      <style>
         /* this is generally a good idea */
         body {
            margin: 0;
            padding: 0;
         }
         
         /* make sure the draggable element has "position: absolute"
         and then top and left are set for the start position */
         #drag_me {
            width: 100px;
            height: 100px;
            background-color: #333;
            position: absolute;
            top: 0;
            left: 0;
         }
         #drop_here {
            width: 80%;
            height: 200px;
            background-color: #eee;
            margin-left: 100px;
            margin-top: -200px !important;
         }
         /* make sure the drag container is set with position relative */
         #drag_cont {
            background-color: #ccc;
            height: auto;
            width: 500px;
            position:relative;
            margin-top: 20px;
            margin-left: 20px;
            margin-bottom: auto;
         }
         #drag_me_handle {
            width: 100%;
            height: auto;
            background-color: #F5B041;
         }
         #drag_me_handle span {
            display: block;
            padding: 20px;
         }
         .indicator {
            width: 100px;
            height: auto;
            background-color: #0066FF;
            border-bottom: 1px solid #eee;
         }
         .indicator span {
            padding: 10px;
            display: block;
         }
         .draggable {
            width: 200px;
            height: 200px;
            background-color: blue;
         }
      </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() {
            var dragElement = $('drag_me');
            var dragContainer = $('drag_cont');
            var dragHandle = $('drag_me_handle');
            var dropElement = $$('.draggable');
            var startEl = $('start');
            var completeEl = $('complete');
            var dragIndicatorEl = $('drag_ind');
            var enterDrop = $('enter');
            var leaveDrop = $('leave');
            var dropDrop = $('drop_in_droppable');
            
            var myDrag = new Drag.Move(dragElement, {
               // Drag.Move options
               droppables: dropElement,
               container: dragContainer,
               
               // Drag options
               handle: dragHandle,
               
               // Drag.Move Events
               onDrop: function(el, dr) {
                  if (!dr) { }else {
                     dropDrop.highlight('#FB911C'); //flashes orange
                     el.highlight('#fff'); //flashes white
                     dr.highlight('#667C4A'); //flashes green
                  };
               },
               onLeave: function(el, dr) {
                  leaveDrop.highlight('#FB911C'); //flashes orange
               },
               onEnter: function(el, dr) {
                  enterDrop.highlight('#FB911C'); //flashes orange
               },
               
               // Drag Events
               onStart: function(el) {
                  startEl.highlight('#FB911C'); //flashes orange
               },
               onDrag: function(el) {
                  dragIndicatorEl.highlight('#FB911C'); //flashes orange
               },
               onComplete: function(el) {
                  completeEl.highlight('#FB911C'); //flashes orange
               }
            });
         });
      </script>
   </head>
   
   <body>
   
      <p align = "center">Drag and Drop Application</p>
      <div id = "drag_cont">
         <div id = "start" class = "indicator"><span>Start</span></div>
         <div id = "drag_ind" class = "indicator"><span>Drag</span></div>
         <div id = "complete" class = "indicator"><span>Complete</span></div>
         <div id = "enter" class = "indicator"><span>Enter Droppable Element</span></div>
         <div id = "leave" class = "indicator"><span>Leave Droppable Element</span></div>
         
         <div id = "drop_in_droppable" class = "indicator">
            <span>Dropped in Droppable Element</span>
         </div>
         
         <div id = "drag_me">
            <div id = "drag_me_handle"><span>HANDLE</span></div>
         </div>
         
         <div id = "drop_here" class = "draggable">
            <p align = "center">Droppable Area</p>
         </div>
         
      </div>
   </body>
   
</html>

다음과 같은 출력이 표시됩니다. 여기에서 핸들을 클릭하고 드래그해야합니다. 이제 왼쪽에서 알림 표시를 찾을 수 있습니다.

Output

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved