MooTools - Sıralanabilir

Sortables, web geliştirmede gelişmiş bir özelliktir ve kullanıcı arayüzü tasarımlarınızla seçenekleri gerçekten açabilir. Ayrıca, öğe kimliklerinin bir listesini yöneten ve sunucu tarafı komut dosyası oluşturma için yararlı olan "serialize" adlı harika bir işlev içerir.

Yeni Bir Sıralanabilir Nesne Oluşturma

İlk olarak, öğelerin listesini bir değişkene gönderiyoruz. Bir öğe listesi dizisi istiyorsanız, tüm koleksiyonu bir değişkene atayın. Ve son olarak bu değişkeni sıralanabilir bir kurucuya aktarın. Sıralanabilir bir nesne oluşturmak için aşağıdaki sözdizimine bir göz atın.

Sözdizimi

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

Aşağıdaki sözdizimi için HTML kodudur.

Sözdizimi

<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>

Sortables Seçeneği

Sıralanabilir, sıralanabilir nesneyi özelleştirmek için farklı seçenekler sunar. Seçenekleri tartışalım.

Kısıtla

Bu seçenek, liste öğelerinin sıralanabilir nesne içindeki ul'ler arasında atlayıp atlayamayacağını belirler. Örneğin, sıralanabilir nesnede iki ul'niz varsa, "constrain"liste öğelerini üst ullarına ayarlayarak"constrain: true". Kısıtlama ayarlamak için aşağıdaki sözdizimine bir göz atın.

Syntax

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

Klon

Bu seçenek, imlecinizin altında bir klon öğesi oluşturmanıza yardımcı olur. Liste öğelerinin sıralanmasına yardımcı olur. Aşağıdaki klon sözdizimine bir göz atın.

Syntax

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

Üstesinden gelmek

Tutamaç, bir öğenin sürükleme tutamacı olarak davranmasını kabul eden bir seçenektir. Bu, liste öğelerinizin seçilebilir olmasını istediğinizde veya listenizde herhangi bir eylem istediğinizde kullanışlıdır. Herhangi bir değişken sağlamazsanız, varsayılan olarak yanlış olarak değerlendirilecektir. Tutamacı kullanmak için aşağıdaki sözdizimine bir göz atın.

Syntax

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

Opaklık

Bu seçenek, sıralama öğesini ayarlamanıza olanak tanır. Bir klon kullanırsanız, opaklık sıralayan öğeyi etkiler.

Syntax

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

Geri döndür

Bu seçenek ya "false" ya da herhangi bir Fx seçeneğini kabul eder. Geri dönüş içinde Fx seçeneğini ayarlarsanız, sıralanan öğenin yerine oturması için bir etki yaratacaktır. Geri dönmek için aşağıdaki sözdizimine bir göz atın.

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

Snap

Bu seçenek, öğe takip etmeye başlamadan önce kullanıcının fareyi kaç piksel sürükleyeceğini görmenizi sağlar.

Syntax

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

Sıralanabilir Olaylar

Sortable, hoş ve anlaşılır olan aşağıdaki etkinlikleri sağlar.

• onStart - sürükleme başladığında çalıştırılır (bir kez kenetlenme başladığı zaman)

• onSort - öğeler sırasını değiştirdiğinde yürütülür

• onComplete - yerine bir eleman düşürdüğünüzde çalışır

Sıralanabilir Yöntemler

Aşağıdaki sıralanabilir yöntemler esasen sınıflara ait işlevlerdir -

detach ()

Detach () ile, tüm liste nesnesini sıralanamaz hale getirerek tüm geçerli tutamaçları "ayırabilirsiniz". Bu, sıralamayı devre dışı bırakmak için kullanışlıdır.

ekle ()

Bu yöntem, tutamaçları sıralama öğelerine "bağlar", detach () sonrasında sıralamayı etkinleştirmek için çalışır.

Öğe Ekle()

Bu, sıralanabilir listenize yeni öğeler eklemenize olanak tanır. Diyelim ki, kullanıcının yeni bir öğe ekleyebileceği sıralanabilir bir listeniz var, bu yeni öğeyi ekledikten sonra, o yeni öğede sıralamayı etkinleştirmeniz gerekecek.

öğeleri kaldır()

Bu yöntem, sıralanabilir bir listedeki bir öğenin sıralama yeteneğini kaldırmanıza izin verir. Bu, belirli bir listedeki belirli bir öğeyi kilitlemek istediğinizde ve diğerleriyle sıralanmasına izin vermediğinizde kullanışlıdır.

addLists ()

Mevcut bir listeye sadece yeni bir öğe eklemek yerine, sıralanabilir nesneye tamamen yeni bir liste eklemek isteyebilirsiniz. Bu yöntem, birden çok liste eklemenize izin vererek daha fazla sıralanabilir eklemeyi gerçekten kolaylaştırır.

removeLists ()

Listeleri sıralanabilir nesneden kaldıralım. Bu, belirli bir listeyi yerinde kilitlemek istediğinizde kullanışlıdır. Diğer listeleri hala sıralanabilir nesnede bırakarak, ancak kaldırılan listenin içeriğini kilitleyerek listeyi kaldırabilirsiniz.

seri hale getir ()

Tüm bu sıralama harika, ama ya verilerle bir şeyler yapmak istersen? .serialize (); öğe kimliklerinin bir listesini ve listedeki sıralarını döndürür. İndeks numarasına göre nesne içinden hangi listeden veri alınacağını seçebilirsiniz.

Misal

Aşağıdaki örnek, numaralandırmalı bir div öğeleri dizisi oluşturur. Daha sonra bunları fare imlecini kullanarak tıklama, sürükleme ve bırakma eylemleriyle yeniden düzenleyin. Aşağıdaki koda bir göz atın.

<!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>

Aşağıdaki çıktıyı alacaksınız -

Çıktı