MooTools - Sortable

Sortables adalah fitur lanjutan dalam pengembangan web dan benar-benar dapat membuka opsi dengan desain antarmuka pengguna Anda. Ini juga mencakup fungsi hebat yang disebut "serialize" yang mengelola daftar id elemen dan berguna untuk skrip sisi server.

Membuat Objek Baru yang Dapat Diurutkan

Pertama, kami mengirim daftar item ke variabel. Jika Anda menginginkan array dari daftar item, maka tetapkan semua koleksi ke variabel. Dan, akhirnya teruskan variabel itu ke konstruktor yang dapat diurutkan. Perhatikan sintaks berikut untuk membuat objek yang dapat diurutkan.

Sintaksis

var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);

Berikut ini adalah kode HTML untuk sintaks.

Sintaksis

<ul id = "listA">
   <li>Item A1</li>
   <li>Item A2</li>
   <li>Item A3</li>
   <li>Item A4</li>
</ul>

<ul id = "listB">
   <li>Item B1</li>
   <li>Item B2</li
   <li>Item B3</li>
   <li>Item B4</li>
</ul>

Opsi Sortable

Sortable menyediakan opsi berbeda untuk menyesuaikan objek yang dapat diurutkan. Mari kita bahas opsinya.

Memaksa

Opsi ini menentukan apakah elemen daftar dapat melompat di antara uls dalam objek yang dapat diurutkan. Misalnya, jika Anda memiliki dua ul dalam objek yang dapat diurutkan, Anda dapat "constrain"item daftar ke ul orang tua mereka dengan mengatur"constrain: trueLihat sintaks berikut untuk menyetel batasan.

Syntax

var sortableLists = new Sortables(sortableListsArray, {
   constrain: true //false is default
});

Klon

Opsi ini membantu Anda membuat elemen klon di bawah kursor Anda. Ini membantu dalam menyortir elemen daftar. Lihatlah sintaks berikut untuk klon.

Syntax

var sortableLists = new Sortables(sortableListsArray, {
   clone: true //false is default
});

Menangani

Tangani adalah opsi yang menerima elemen untuk bertindak sebagai gagang seret. Ini berguna kapan pun Anda ingin item daftar Anda dapat dipilih atau Anda ingin tindakan apa pun dalam daftar Anda. Jika Anda tidak memberikan variabel apa pun, itu akan dianggap salah secara default. Lihatlah sintaks berikut untuk menggunakan pegangan.

Syntax

var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
   handle: handleElements //false is default
});

Kegelapan

Opsi ini memungkinkan Anda menyesuaikan elemen sortir. Jika Anda menggunakan klon, opasitas memengaruhi elemen yang diurutkan.

Syntax

var sortableLists = new Sortables(sortableListsArray, {
   opacity: 1 //default is 1
});

Kembali

Opsi ini menerima "false" atau opsi Fx apa pun. Jika Anda mengatur opsi Fx dalam pengembalian, itu akan membuat efek untuk elemen yang diurutkan untuk menetap di tempatnya. Lihatlah sintaks berikut untuk kembali.

Syntax

var sortableLists = new Sortables(sortableListsArray, {
   revert: false //this is the default
});

//you can also set Fx options
var sortableLists = new Sortables(sortableListsArray, {
   revert: {
      duration: 50
   }
});

Jepret

Opsi ini memungkinkan Anda melihat berapa piksel yang akan ditarik pengguna mouse sebelum elemen mulai mengikuti.

Syntax

var sortableLists = new Sortables(sortableListsArray, {
   snap: 10 //user will have to drag 10 px to start the list sorting
});

Acara yang Dapat Diurutkan

Sortable menyediakan acara berikut yang bagus dan lurus ke depan.

onStart - dijalankan saat drag dimulai (setelah snap selesai)
onSort - dijalankan saat item berubah urutan
onComplete - dieksekusi ketika Anda menjatuhkan elemen di tempatnya

Metode yang Dapat Diurutkan

Metode yang dapat diurutkan berikut pada dasarnya adalah fungsi yang termasuk dalam kelas -

melepaskan()

Dengan detach (), Anda dapat "melepaskan" semua pegangan saat ini, membuat seluruh objek daftar tidak dapat diurutkan. Ini berguna untuk menonaktifkan sort.

melampirkan()

Metode ini akan "melampirkan" pegangan ke item penyortiran, berfungsi untuk mengaktifkan penyortiran setelah pelepasan ().

addItems ()

Ini memungkinkan Anda menambahkan item baru ke daftar yang dapat diurutkan. Misalkan Anda memiliki daftar yang dapat diurutkan di mana pengguna dapat menambahkan item baru, setelah Anda menambahkan item baru tersebut, Anda perlu mengaktifkan pengurutan pada item baru tersebut.

removeItems ()

Metode ini memungkinkan Anda menghapus kemampuan pengurutan item dalam daftar yang dapat diurutkan. Ini berguna ketika Anda ingin mengunci item tertentu dalam daftar tertentu dan tidak membiarkannya menyortir dengan yang lain.

addLists ()

Daripada hanya menambahkan item baru ke daftar yang sudah ada, Anda mungkin ingin menambahkan daftar baru ke objek yang dapat diurutkan. Metode ini memungkinkan Anda menambahkan beberapa daftar, membuatnya sangat mudah untuk menambahkan lebih banyak sortable.

removeLists ()

Mari kita hapus daftar dari objek yang dapat diurutkan. Ini berguna ketika Anda ingin mengunci daftar tertentu pada tempatnya. Anda dapat menghapus daftar, membiarkan daftar lain masih dalam objek yang dapat diurutkan, tetapi mengunci konten dari daftar yang dihapus.

membuat serial ()

Semua penyortiran itu bagus, tetapi bagaimana jika Anda ingin melakukan sesuatu dengan datanya? .serialize (); akan mengembalikan daftar id item serta urutannya pada daftar. Anda dapat memilih daftar mana untuk mendapatkan data dari dalam objek dengan nomor indeks.

Contoh

Contoh berikut membuat larik elemen div dengan penomoran. Kemudian, atur ulang dengan tindakan klik, seret, dan lepas menggunakan penunjuk mouse. Perhatikan kode berikut.

<!DOCTYPE html>
<html>
   
   <head>
      <style>
         #test {
            position: inherit;
         }
         ul#sortables {
            width: 300px;
            margin: 0;
            padding: 0;
         }
         li.sortme {
            padding: 4px 8px;
            color: #fff;
            cursor: pointer;
            list-style: none;
            width: 300px;
            background-color: #222;
            border: 1px solid;
         }
         ul#sortables li {
            margin: 10px 0;
         }
      </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() {
            new Sortables($('test'), {
               initialize: function(){
                  var step = 0;
                  
                  this.elements.each(function(element, i) {
                     var color = [step, 82, 87].hsbToRgb();
                     element.setStyle('background-color', color);
                     step = step + 35;
                     element.setStyle('height', $random(40, 100));
                  });
               }
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "test">
         <li class = "sortme">0</li>
         <li class = "sortme">1</li>
         <li class = "sortme">2</li>
         <li class = "sortme">3</li>
         <li class = "sortme">4</li>
         <li class = "sortme">5</li>
         <li class = "sortme">6</li>
         <li class = "sortme">7</li>
         <li class = "sortme">8</li>
         <li class = "sortme">9</li>
         <li class = "sortme">10</li>
      </ul>
   </body>
   
</html>

Anda akan menerima output berikut -

Keluaran