MooTools - Seret dan Jatuhkan
MooTools menyediakan fitur luar biasa yang membantu Anda menambahkan fungsi seret dan lepas ke elemen halaman web Anda. Kita bisa melakukan ini dengan membuat baru kita sendiriDrag.Moveobyek. Dengan menggunakan objek ini, Anda dapat menentukan opsi dan acara Anda. Kelas Drag dan Drag. Pindah berasal dari perpustakaan MooTools More.
Mari kita bahas opsi dan event dari objek Drag.Move.
Drag.Move
Drag.Move adalah Object yang digunakan untuk menambahkan fitur Drag and Drop ke elemen html. Drag.Move memperluas Drag, sehingga kita dapat menggunakan semua Options dan Events dari kelas Drag dengan objek Drag.Move. Perhatikan sintaks berikut dan pahami cara menggunakan objek Drag.Move.
Sintaksis
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 Options
Drag.Move menyediakan opsi berikut untuk mempertahankan elemen html dengan fitur Drag and Drop -
droppable - Ini membantu Anda menyetel pemilih elemen yang dapat dijatuhkan (elemen yang mendaftar pada kejadian terkait penurunan).
container - Ini membantu Anda menyetel wadah elemen seret (mempertahankan elemen di dalamnya).
snap- Ini membantu Anda menyetel berapa piksel yang harus ditarik pengguna sebelum elemen yang dapat diseret mulai menyeret. Standarnya adalah 6, dan Anda dapat mengaturnya ke sejumlah variabel yang mewakili sebuah angka.
handle- Ini membantu Anda menambahkan pegangan ke elemen yang dapat diseret. Tangani menjadi satu-satunya elemen yang akan menerima ambil.
Lihatlah sintaks berikut untuk bagaimana dan di mana mendefinisikan elemen droppable dan container, snap, dan handle.
Sintaksis
//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
});Seret. Pindahkan acara
Peristiwa Drag.Move menyediakan fungsi berbeda yang dapat digunakan di berbagai level tindakan. Misalnya, saat Anda mulai menarik atau melepas objek, setiap peristiwa Drag.Move akan meneruskan elemen yang diseret atau elemen yang dijatuhkan sebagai parameter.
Berikut ini adalah acara yang didukung -
onStart ()
Ini menimbulkan peristiwa di awal tarik. Jika Anda menyetel jentikan panjang, peristiwa ini tidak akan naik sampai mouse berada di kejauhan. Perhatikan sintaks berikut.
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 ()
Ini menimbulkan peristiwa terus menerus saat Anda menyeret elemen. Perhatikan sintaks berikut.
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 ()
Ini menimbulkan peristiwa ketika Anda menjatuhkan elemen yang dapat diseret ke dalam elemen yang dapat dijatuhkan. Perhatikan sintaks berikut.
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
}
});sedang cuti()
Ini menimbulkan peristiwa saat elemen yang dapat diseret meninggalkan batas elemen yang dapat dijatuhkan. Perhatikan sintaks berikut.
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 ()
Ini muncul saat elemen yang dapat diseret memasuki area elemen yang dapat dijatuhkan. Perhatikan sintaks berikut.
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 ()
Ini menimbulkan peristiwa. onComplete mengacu pada saat Anda menjatuhkan droppable, dan ini akan meningkatkan apakah Anda mendarat di droppable atau tidak. Perhatikan sintaks berikut.
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
}
});Mari kita ambil contoh yang akan mengeksplorasi semua fitur yang dijelaskan dalam bab ini. Fitur-fiturnya adalah - Drag, Drag.Move, onEnter, onLeave, onDrop, onStart, onDrag, dan onComplete. Dalam contoh ini, kami menyediakan satu HANDLE, yang dengannya Anda dapat menyeret objek yang dapat diseret ke mana saja ke dalam wadah. Untuk setiap tindakan, ada notifikasi di sisi kiri (ditunjukkan dengan warna biru). Ada area Droppable di dalam wadah. Jika objek Draggable masuk ke area Droppable, maka tiga indikator terakhir diaktifkan. Perhatikan kode berikut.
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>Anda akan menerima output berikut di mana, Anda harus mengklik Tangani dan Tarik. Anda sekarang dapat menemukan indikasi notifikasi di sisi kiri.
Output