MooTools - Kéo và thả
MooTools cung cấp một tính năng tuyệt vời giúp bạn thêm các chức năng kéo và thả kéo vào các phần tử trang web của mình. Chúng tôi có thể làm điều này bằng cách tạoDrag.Movevật. Sử dụng đối tượng này, bạn có thể xác định các tùy chọn và sự kiện của mình. Các lớp Kéo và Kéo. Di chuyển đến từ thư viện MooTools More.
Hãy để chúng tôi thảo luận về các tùy chọn và sự kiện của đối tượng Drag.Move.
Drag.Move
Drag.Move là một Đối tượng được sử dụng để thêm tính năng Kéo và Thả vào các phần tử html. Drag.Move mở rộng tính năng Kéo, vì vậy chúng ta có thể sử dụng tất cả các Tùy chọn và Sự kiện của lớp Kéo theo đối tượng Drag.Move. Hãy xem cú pháp sau và hiểu cách sử dụng đối tượng Drag.Move.
Cú pháp
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'));
}
});
Tùy chọn Drag.Move
Drag.Move cung cấp các tùy chọn sau để duy trì các phần tử html với các tính năng Kéo và Thả:
droppable - Điều này giúp bạn thiết lập bộ chọn các phần tử có thể kéo xuống (các phần tử đăng ký trên các sự kiện liên quan đến thả).
container - Điều này giúp bạn thiết lập vùng chứa của phần tử kéo (giữ phần tử bên trong).
snap- Điều này giúp bạn đặt bao nhiêu px người dùng phải kéo con trỏ trước khi phần tử có thể kéo bắt đầu kéo. Giá trị mặc định là 6 và bạn có thể đặt nó thành bất kỳ số lượng biến nào đại diện cho một số.
handle- Điều này giúp bạn thêm một tay cầm vào phần tử có thể kéo của mình. Xử lý trở thành yếu tố duy nhất chấp nhận cú ngoạm.
Hãy xem cú pháp sau để biết cách và vị trí xác định các phần tử có thể kéo xuống và vùng chứa, snap và xử lý.
Cú pháp
//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
});
Sự kiện Drag.Move
Sự kiện Drag.Move cung cấp các chức năng khác nhau có thể được sử dụng ở các cấp độ khác nhau của hành động. Ví dụ: khi bạn bắt đầu kéo hoặc thả một đối tượng, mỗi sự kiện Drag.Move sẽ chuyển phần tử được kéo hoặc phần tử bị bỏ làm tham số.
Sau đây là các sự kiện được hỗ trợ -
băt đâu()
Điều này làm nảy sinh một sự kiện khi bắt đầu kéo. Nếu bạn đặt snap dài, thì sự kiện này sẽ không xuất hiện cho đến khi con chuột ở khoảng cách xa. Hãy xem cú pháp sau.
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 ()
Điều này làm tăng một sự kiện liên tục trong khi bạn đang kéo một phần tử. Hãy xem cú pháp sau.
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 ()
Điều này làm nảy sinh sự kiện khi bạn thả phần tử có thể kéo vào một phần tử có thể kéo xuống. Hãy xem cú pháp sau.
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
}
});
nghỉ()
Điều này làm tăng sự kiện khi một phần tử có thể kéo rời khỏi giới hạn của phần tử có thể kéo xuống. Hãy xem cú pháp sau.
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 ()
Điều này tăng lên khi một phần tử có thể kéo đi vào vùng phần tử có thể kéo xuống. Hãy xem cú pháp sau.
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 ()
Điều này làm nảy sinh một sự kiện. onComplete đề cập đến thời điểm bạn thả một thiết bị có thể thả xuống và nó sẽ nâng cao việc bạn có hạ cánh trong một thiết bị có thể thả xuống hay không. Hãy xem cú pháp sau.
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
}
});
Hãy để chúng tôi lấy một ví dụ sẽ khám phá tất cả các tính năng được giải thích trong chương này. Các tính năng là - Kéo, Kéo.Move, onEnter, onLeave, onDrop, onStart, onDrag và onComplete. Trong ví dụ này, chúng tôi đang cung cấp một HANDLE, sử dụng nó để bạn có thể kéo đối tượng có thể kéo vào bất kỳ đâu vào vùng chứa. Đối với mỗi hành động, có một thông báo ở phía bên trái (biểu thị bằng màu xanh lam). Có một khu vực có thể thả trong vùng chứa. Nếu đối tượng Draggable đi vào khu vực Droppable, thì ba chỉ báo cuối cùng được kích hoạt. Hãy xem đoạn mã sau.
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>
Bạn sẽ nhận được đầu ra sau đây, trong đó, bạn phải nhấp vào Xử lý và Kéo nó. Bây giờ bạn có thể tìm thấy các chỉ báo thông báo ở phía bên trái.
Output