MooTools - ลากและวาง

MooTools มีคุณสมบัติมากมายที่ช่วยให้คุณเพิ่มฟังก์ชันการลากและวางลากไปยังองค์ประกอบหน้าเว็บของคุณ เราสามารถทำได้โดยการสร้างใหม่ของเราเองDrag.Moveวัตถุ. การใช้วัตถุนี้คุณสามารถกำหนดตัวเลือกและเหตุการณ์ของคุณได้ ลากและลากย้ายชั้นเรียนมาจากห้องสมุด MooTools More

ให้เราพูดคุยเกี่ยวกับตัวเลือกและเหตุการณ์ของวัตถุ Drag.Move

ลากย้าย

Drag.Move เป็นวัตถุที่ใช้ในการเพิ่มคุณสมบัติลากแล้วปล่อยให้กับองค์ประกอบ html Drag.Move ขยายการลากเพื่อให้เราสามารถใช้ตัวเลือกและเหตุการณ์ทั้งหมดของคลาส Drag โดย Drag.Move object ดูไวยากรณ์ต่อไปนี้และทำความเข้าใจเกี่ยวกับการใช้วัตถุ 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 มีตัวเลือกต่อไปนี้ในการดูแลองค์ประกอบ html ด้วยคุณสมบัติ Drag and Drop -

• droppable - ช่วยให้คุณตั้งค่าตัวเลือกขององค์ประกอบที่หยดได้ (องค์ประกอบที่ลงทะเบียนในเหตุการณ์ที่เกี่ยวข้องกับการดรอป)

• container - ช่วยให้คุณตั้งค่าคอนเทนเนอร์ขององค์ประกอบการลาก (เก็บองค์ประกอบไว้ข้างใน)

• snap- ช่วยให้คุณกำหนดจำนวนพิกเซลที่ผู้ใช้ต้องลากเคอร์เซอร์ก่อนที่องค์ประกอบที่ลากได้จะเริ่มลาก ค่าเริ่มต้นคือ 6 และคุณสามารถตั้งค่าเป็นตัวแปรจำนวนเท่าใดก็ได้ที่แทนตัวเลข

• handle- สิ่งนี้ช่วยให้คุณเพิ่มที่จับให้กับองค์ประกอบที่ลากได้ของคุณ มือจับกลายเป็นองค์ประกอบเดียวที่จะยอมรับการคว้า

ดูไวยากรณ์ต่อไปนี้สำหรับวิธีและตำแหน่งที่จะกำหนดองค์ประกอบ droppable และคอนเทนเนอร์สแน็ปและจัดการ

ไวยากรณ์

//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 แต่ละรายการจะส่งผ่านองค์ประกอบที่ลากหรือองค์ประกอบที่ตกหล่นเป็นพารามิเตอร์

ต่อไปนี้เป็นเหตุการณ์ที่รองรับ -

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

ลา()

สิ่งนี้ทำให้เกิดเหตุการณ์เมื่อองค์ประกอบที่ลากได้ออกจากขอบเขตขององค์ประกอบที่หยดได้ ดูไวยากรณ์ต่อไปนี้

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 หนึ่งอันโดยใช้ว่าคุณสามารถลากวัตถุที่ลากได้ไปที่ใดก็ได้ในคอนเทนเนอร์ สำหรับทุกการกระทำจะมีการแจ้งเตือนทางด้านซ้าย (ระบุด้วยสีฟ้า) มีพื้นที่ Droppable ในคอนเทนเนอร์ หากวัตถุ 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>

คุณจะได้รับผลลัพธ์ต่อไปนี้ซึ่งคุณต้องคลิกที่ Handle and Drag it ตอนนี้คุณสามารถค้นหาการแจ้งเตือนได้ทางด้านซ้ายมือ

Output